Div in wrapper does not stay where it should

HTML & CSS
1

i have a simple issue with one out of three divs in a wrapper div that jumps down when i resize the browser. the center div does not, but the right div does.

code:

#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background: rgba(172,229,238,0.2);
 text-align:center;
}
#leftcolumn { 
 border: 1px solid #ccc;
 background: rgba(58,151,165,0.2);
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 200px;
 float: left;
}
#content { 
 float: left;
 border: 1px solid #ccc;
 background: rgba(6,144,165,0.2);
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 456px;
 display: inline;
}
#rightcolumn { 
 border: 1px solid #ccc;
 background: rgba(58,151,165,0.2);
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 200px;
 float: left;
}

the html is simple enough, just standard start and a wrapper with 3 div’s and some nested content. have checked thoroughly for issues there and rewritten it twice. the issue has to be in the CSS.

2

Using fixed widths and floats is never going to work well in different widths.
For a 3 column layout I think using display table/table-cell should work better for you.

3

I thought I had an example demo somewhere:-

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.