I seem to be having a problem stacking 3 divs side by side. I've went through a few different pages that gave me codes and tips for how to do this but for some reason it doesn't come out right. Here is the div code I am using in my page, and the info for the divs from the style sheet. Hoping someone can help me out with a fix to what I am doing wrong.
I decided to make another edit because I really didnt give enough info, I have 3 divs side by side but they seem to stick together and one is different, I want them to evenly space to fit flush with the rest of the layout. I have a link to the site so you can see what I have what I have
Also sorry about the mix up with the # missing from the #t2 on the post I accidentally deleted it when making the post its in the code.
<div id="testwrap">
<div id="t1">left</div>
<div id="t3">right</div>
<div id="t2">middle</div>
</div>
#testwrap {
width: 933px;
margin-right: auto;
margin-left: auto;
}
#t1 {
width: 311px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
height: 220px;
margin-top: 20px;
margin-bottom: 20px;
float: left; width:311px;
padding: 10px;
}
#t2 {
background-color: #FFF;
height: 220px;
width: auto;
padding: 10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
#t3 {
background-color: #FFF;
height: 220px;
width: 311px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
width:311px;
float: right; width:311px;
padding: 10px;
}
Here's a clean working code (Your code is so messy). You can copy paste this to your HTML document. Just change the background color of the divs to your liking.
http://jsfiddle.net/K3FJe/
HTML
<div id="testwrap">
<div id="t1">left</div>
<div id="t2">middle</div>
<div id="t3">right</div>
</div>
CSS
#testwrap {
width: 933px;
height: 280px;
margin: 0 auto;
background: black;
}
#t1, #t2, #t3 {
height: 220px;
padding: 10px;
color: #FFF;
float: left;
}
#t1 {
width: 273px;
margin: 20px 6px 20px 12px;
background-color: red;
}
#t2 {
width: 279px;
margin: 20px 6px 20px 6px;
background-color: blue;
}
#t3 {
width: 273px;
margin: 20px 12px 20px 6px;
background-color: green;
}
I updated it with even spaces between them, I think this should work.
Looks like it's because you're floating t1 and t3, and taking them out of the document flow as a result. If you float #t2 as well, and change its width to match the resulting space (instead of auto), it should work.
#t2 {
background-color: #000;
height: 220px;
width: 250px;
padding: 10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
float:left;
}
You could use:
#testwrap {
display: table;
[...]
}
#t1, #t2, #t3 {
display : table-cell;
width: 271px;
}
Then remove all the floats.
This way all the column will always have the same height.
Related
how to change the position of "h" which in "hello" and change its width using css and without modifying the div element,
I have tried the pseudo element first-letter, but it didn't work for me
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>
The first-letter is working fine. There is also another method to place the first in the span tag and styling it.
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>
Use float for this task:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>
Hey unfortunately CSS cant select first letter by itself. You can use another div for example;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
of course you can address direct name or you can access to that span element in different ways. But dont forget span by itself doesn't change the document placing etc that's why we prefer using this element for actions like that.
Hi I am currently working on a project that has lots of DIVs and sections and such.
I am currently having problems with my header. The search bar and the panes div are going down or going out from the "header" section when I'm trying to minimize the browser window.
Structure goes like this.
As you can see on the image above, the red part is the header and it has 3 divs inside it.
This is how it goes on the view:
<div id = "header" class = "fixed-top">
<div class = "wrapper">
<div id = "logo">
</div>
<div id = "search-box">
</div>
<div id = "panes">
</div>
</div>
</div>
The header's width is 100% and having a class of position-fixed.
The wrapper class has a width of 980px and margin is 0 auto/auto centre. I also made its position to absolute.
The logo style looks like this:
#logo {
width: 130px;
height: 45px;
float: left;
background:url(image.png);
position: relative;
margin: 4px 0 0 2px;
}
The search bar on the other hand looks like this:
#search-box {
width: 440px;
padding: 2px 8px;
float: left;
position: relative;
margin-left: 90px;
}
Lastly, the panes style is:
#panes {
float: right;
width: 170px;
height: 48px;
position: relative;
margin-right: 10px;
}
And by the way, the search-box div also have child divs. And panes div has a UL list and each LIs are floated left.
Is there anything I am missing out why this happens?
I also tried the "clearfix" but it is still happening.
Thanks.
Just Try This CSS code, it will work nice
*{
margin:0;
padding:0;
}
#header{
background-color:#ED1C24;
width:740px;
float:left;
}
#logo {
width: 124px;
height: 45px;
background:url(image.png);
position: relative;
margin: 4px 0 0 2px;
float:left
}
#search-box {
width: 420px;
margin-left:20px;
position: relative;
float:left
}
#panes {
width: 160px;
height: 48px;
position: relative;
margin-right: 10px;
float:left
}
Like this
DEMO
CSS
* {
margin: 0;
padding: 0;
}
#header {
background-color: #ED1C24;
display: table;
vertical-align: middle;
}
#logo {
width: 130px;
height: 45px;
background: url(image.png);
position: relative;
margin: 4px 0 0 2px;
display: table-cell;
}
#search-box {
width: 440px;
padding: 2px 8px;
position: relative;
margin-left: 90px;
display: table-cell;
}
#panes {
width: 170px;
height: 48px;
position: relative;
margin-right: 10px;
display: table-cell;
}
I'm trying to make something looks like this:
http://student.santarosa.edu/~anarbuto/CSS/templates/stylin2_chapters/chapter_5/3_col_rounded.html
but without any JS or CSS hacks.
Also tried this:
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm
and many other examples, but none of them works well.
I'd like the left and the right columns to be a fix width (say 300px), and the middle column takes the rest of the page.
Not sure if anyone can help..?
Thanks!!!
Edit: They need to be of same height (without specifying the height), ie. all 3 columns should have same height as the tallest column.
To make the corners of div round you have to use css and just go to
http://www.w3schools.com/css3/css3_borders.asp
This is not a hack I believe.
EDIT:
For your layout to be fluit I added % to the width:
http://jsfiddle.net/qBH3A/3/
CSS:
h1{
padding: 0;
margin: 0;
text-align: center;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0;
background-color: grey;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
#header{
background-color: green;
width: 100%;
margin: 0 auto;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#left{
background-color: yellow;
float: left;
width: 20%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#right{
background-color: blue;
float: right;
width: 20%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#center{
background-color: red;
width: 58%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
float: left;
margin-left: 10px;
}
I made a quick example for a 960px grid layout:
http://jsfiddle.net/qBH3A/1/
I just set the values to a max-width and width.
HTML:
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>right</h1>
</div>
<div id="center">
<h1>center</h1>
</div>
</div>
CSS:
h1{
padding: 0;
margin: 0;
text-align: center;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0;
background-color: grey;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
#header{
background-color: green;
width: 100%;
margin: 0 auto;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#left{
background-color: yellow;
float: left;
width: 200px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#right{
background-color: blue;
float: right;
width: 200px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#center{
background-color: red;
width: auto;
max-width: 540px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
Note that I used border-radius of 10px;
Hope this is what you want.
My goal is to place four divs within a single "container" div. Here's my code so far:
HTML
<body>
<div id="navBar">
<div id="subDiv1">
</div>
<div id="subDiv2">
</div>
<div id="subDiv3">
</div>
<div id="subDiv4">
</div>
</div>
</body>
CSS
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
margin-left: 25%;
}
#subDiv3
{
float: left;
margin-left: 50%;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
margin-left: 75%;
}
As far as I know this is the only part of my code that's relevant to my question so I left some other parts out.. Don't mind the width and margin of the navBar, because it's actually within another container as well.
P.S I searched Google and StackOverFlow and I could not find an answer that was helpful. There were many questions about placing two divs within a single div, but none for aligning multiple divs within a single div.
Thanks for any help in advance!
I'd do two things, get rid of the margins on your floated divs and add the box-sizing rule.
jsFiddle example
#navBar {
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4 {
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
box-sizing:border-box;
}
#subDiv1 {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
#subDiv2 {
float: left;
}
#subDiv3 {
float: left;
}
#subDiv4 {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
You can use display: table
.menu {
display: table;
width: 100%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu > div {
display: table-row;
background-color: green;
}
.menu > div >div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
}
#media screen and (max-width: 400px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu > div {
display: block;
}
.menu > div > div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
fiddle
The main issue that I saw with your css is that you add in a margin for each float item. This would make sense if it was positioned absolutely. Since it isn't the divs will stack. Removing the margins will allow the divs to fit in the container:
http://jsfiddle.net/eGLTM/
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 24%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
}
#subDiv3
{
float: left;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
I think the problem you are having, is that you need to clear your floats. This might not be the best way to do it, but for simplicities sake, add this:
<div style="clear:both;"></div> after the last <div> inside your container(#navBar).
Hi I have page http://rygol.cz/qlife/ and when Iam zooming out the content goes out of his div. If i you height: auto; or height: 100% its ok but leftcolumn is smaller then right, clear doesnt help me.
Have anybody some idea how to fix it?
#leftcolumn {
color: #333;
background: #fff;
background-image:url("./images/corner.png");
background-repeat:no-repeat;
padding: 10px;
height: 800px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
height: 800px;
width: 638px;
display: inline;
margin-bottom: 10px;
}
If you need that extra space between header and the content you should just go ahead and place the #leftcolumn and #rightcolumn in an additional wrapper container with the background-color set and have the #container without the background-color set.
HTML structure:
<div id="container">
<div id="header"></div>
<div id="content-wrapper">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
</div>
</div>
And CSS:
#container {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
background: #fff;
width: 902px;
padding: 10px;
margin-bottom: 10px;
height: 200px;
}
#content-wrapper {
background-color: #fff;
min-height: 1px;
overflow: hidden; /* clear hack :) */
}
#leftcolumn {
color: #333;
background: #fff;
background-image: url("./images/corner.png");
background-repeat: no-repeat;
padding: 10px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
width: 638px;
margin-bottom: 10px;
}
Remove the height declarations in the columns. You could also use overflow-y: scroll though I would stick to removing the heights. Another thing to consider is that people generally don't zoom out that far anyway: the text becomes impossible to read at the zoom level it breaks at (chrome v24).
If you want equal height columns have the shorter column floated to one side then set position: relative and top: 0; bottom: 0; then set the other column to have overflow: hidden; to 'clear' the float. Note: the floated column should come first in the markup for this to work.