Menu
i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress).
(The 2 sidebars work fine with float. ) So i tried width:auto on the container.
But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.
Do you know how to fix this?
#container { /* the text */
overflow:auto;
width:auto;
position:relative;
float:left;
}
#primary { /* first sidebar */
position:relative;
border:1px solid red;
float:right;
width:250px;
}
#second { /* second sidebar */
border:1px solid red;
background:white;
width:250px;
height:auto;
float:right;
margin-left:15px;
}
Thanks
EDIT :
let's say i'm using this instead of the wordpress sidebars : i still can't manage to make it work, could someone have a look with this simple code? there're 2 boxes : the green one and the red one...
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div style="position:relative; width:700px; margin:0 auto;">
<div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container.
But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div>
<div style="width:20%; float:right; border:1px solid red;">blablabla</div>
</div>
</body>
</html>
308
A width:auto is the default value so it won't be doing anything other than what a DIV would do as standard, which is to fill the available width since it's a block level element. This changes when you float it and it will wrap its content so could be any width up to the maximum width.
I think the trouble you're running in to is mixing percentage widths and fixed widths. I can see what you're trying to do - have a fixed width sidebar (or two) and the rest of the page flexible. It was really easy to do this back in the table-based layout days but let's not go there!
Sounds like you want a fluid layout but with 2 fixed with columns. Might be worth having a read of this article to see if anything suits what you're trying to do: http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
128
Use display:table on parent div. Then display:table-cell on the children. They will align the way they would in a table.
#container { /* the text */
overflow:auto;
width:auto;
position:relative;
// float:left;
display: table-cell;
vertical-align:top;
}
#primary { /* first sidebar */
position:relative;
border:1px solid red;
// float:right;
width:250px;
vertical-align:top;
}
#second { /* second sidebar */
border:1px solid red;
background:white;
width:250px;
height:auto;
// float:right;
margin-left:15px;
display: table-cell;
vertical-align:top;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
