Basically, I have a fixed sidebar (with a fixed width) and a content div (with a max-width).
I want the content div to be centered, and the sidebar to be positionned to the left of this content div.
The problem is, on a small screen or when reducing the size of the window, the content div must shrink and not push the sidebar.
I tried a lot of solutions (floating blocks with fake margin blocks, display:inline-block and white-space: nowrap), without success.
Here's the actual page : http://daimao.info/logique-monde-esprit?testCSS=3 , which adapts great to the size of the screen but has all the content on the left of the window.
Here's a modified page : http://daimao.info/logique-monde-esprit?testCSS=1 , that shows what I try to do, but only display well on large resolutions.
Thanks for any help.
Here is an example of what I think you're after:
Code structure like this:
<div class="container"> <div class="sidebar"> Sidebar content </div> <div class="content"> Content </div> </div>
Create a fixed space for the sidebar by adding a fixed padding-left
value to .container
Set the sidebar width to the same value, float
it left, and give it a negative margin-left
of the same value
The sidebar will remain the same size and continue to fill the padding-left
of the container as the container resizes. The .content
will fill the remaining space within .container
, resizing as .container
resizes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.