I am pulling my hair because I just can't figure it out. I develop a wiki. A typical page has a sidebar on the right with a fixed width. To the left of this sidebar are text, div, tables, etc. (Page content). Basically, I want everything to be at full width - this means that next to the side panel should be full width minus the length of the side panel. If this is not next to the sidebar, this 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, everything wraps around the sidebar. If I have a super long sentence, it goes all the way to the left of the sidebar and then breaks to a new line. If I have a super long paragraph, all the text appears next to the sidebar, and also goes right below it.
However, the problem I am facing is when I want to place the div to the left of the sidebar. If set to 100%, the div does not take into account the width of the sidebar and expands to the full width of the page, thereby overlapping the sidebar. Normally I would just set the div to have a right border across the width of the sidebar. However, for my purposes this will not be feasible, because at different screen resolutions, the div may be lower on the page under the sidebar, and thus there will be a space to the right of the div to the right (plus it will just be easier to code to understand this problem, so the div page knows how much they should be themselves). For example, in my text image above, if the page was thinner because it had a lower screen resolution, the first box would probably be under the sidebar. With the right edge of the sidebar, this would mean that there would be a large space to the right of the window and that this 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 yellow.</p> <p>It 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 yellow.</p> <p>It 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 hope that there is a way to make sure that if something is near the sidebar, for example, a table in a div, it will be at the maximum page width minus the width of the sidebar. If this is not next to the sidebar, this is the full width of the page. I assume that I just want everything else to be like text - it will go straight to the one to the right of it (either the sidebar, if there is one, or the right side of the page if the sidebar is not there).
Thank you in advance!:)