I am pulling my hair out because I just cannot figure this out. I am developing a wiki. A typical page has a sidebar to the right with a fixed width. To the left of this sidebar is text, div’s, tables, etc. (the content of the page). Basically, I want everything to be at full width – that means if it’s next to the sidebar, it should be the full width minus the length of the sidebar. If it’s not next to the sidebar, it should be the full width of the page. Like this:
_______________________________
| ___ |
| text text text text te- | | |
| xt text text text text. | S | |
| ______________________ | B | |
| | | | | |
| | table | |___| |
| | or | |
| | div | |
| |_____________________| |
| |
| more text text text text tex- |
| t text text text text text t- |
| ext text text text text text |
| ____________________________ |
| | another table | |
| | or | |
| | div | |
| |___________________________| |
|_______________________________|
In the case of text, it all wraps around the sidebar perfectly. If I have a super long sentence, it goes all the way to the left of the sidebar, then breaks to a new line. If I have a super long paragraph, all of the text bumps up right next to the sidebar and also goes right underneath it.
However, the problem I’m having is when I want to put a div to the left of the sidebar. When set to 100%, the div does not take into consideration the width of the sidebar and expands to the full width of the page, thus overlapping the sidebar. Normally I would just set the div to have a margin-right of the width of the sidebar. However, for my purposes, this isn’t going to feasible because on different screen resolutions, the div might be lower on the page below the sidebar and thus there will be a blank gap to the right of the div (plus it would just be easier for coding purposes to figure this problem out so the page’s div’s know how wide they should be themselves). For example, in my text picture above, if the page were skinnier because it’s on a lower screen resolution, the first box would probably be underneath the sidebar. With a margin-right of the sidebar, this would mean there would be a big gap to the right of the box and that it would not be the full width of the page.
This is the code I’m using.
<html>
<head>
<style type="text/css">#sidebar {
float: right;
width: 250px;
height: 200px;
border: 1px solid red;
}
#la {
border: 1px solid green;
width: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="sidebar">Sidebar with fixed width</div>
<p>The sun is a star.</p>
<p>It's yellow.</p>
<p>It's very hot.</p>
<div id="la">This div is next to the sidebar and should bump up right next to its left side, as in, 100% of the page minus the width of the sidebar. It should not overlap the sidebar. This is not something that can just be done automatically with margin-right using the width of the sidebar because it might not actually be next to the sidebar on certain screen resolutions.</div>
<p>The sun is a star.</p>
<p>It's yellow.</p>
<p>It's very hot.</p>
<div id="la">This div is NOT next to the sidebar on most screen resolutions - it is under it where there is nothing to the right of it, so it should be the full width of the page.</div>
</div>
</body>
</html>
I’m hoping there’s a way to just make it so that if something is next to the sidebar, such as a table within a div, it’ll be at the max width of the page minus the width of the sidebar. If it’s not next to the sidebar, it’s the full width of the page. I guess I just want everything else to act like text – it’ll go right up to whatever is to the right of it (either the sidebar if it’s there or the right side of the page if the sidebar is not there).
Write like this:
CSS
HTML
Check this http://jsfiddle.net/rq5WX/