How to Create a Fixed-Width Layout with CSS
A «fixed-width» layout is one in which the layout of the page is contained within a wrapper that doesn’t adjust its size when the width of the browser changes.
In this how to, you’ll learn how to create a 2-column fixed-width layout.
- Start with the following simple web page containing four content areas: header, footer, menu, and content.
Two-column fixed layout
Menu
This column is fixed.
This column is fixed.
This column is fixed.
This column is fixed.
This column is fixed.
Content
This column is fixed.
footer * < margin:0; padding:0; border:0; >#wrapper < border: 1px solid #000; width: 950px; margin: auto; >#header < border-bottom: 1px solid #000; padding: 10px; background-color: #eee; >#menu < width: 180px; float: left; padding: 10px; border-right: 1px solid #000; >#content < margin-left: 200px; border-left: 1px solid #000; padding: 10px; line-height: 2em; >.clearer
Open the HTML page in a browser. This code renders the following:
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS (this article)
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3
Training Options
Set a Fixed div to 100% width of the parent container
I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%). Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.
HTML
Some relative item placed item CSS
Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/ Does anyone know of a way to accomplish this? I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion: http://jsfiddle.net/EVYRE/4/
7 Answers 7
You can use margin for .wrap container instead of padding for .wrapper:
@JackMurdoch, the only way i find without js is in using calc for right and left properties. Look at jsfiddle
This would not work when the wrapper is shrunk below the max-width (600px in the example), but I believe you are right it cannot be done outside of javascript. Thanks for the help.
it doesn’t really works, look at this fiddle jsfiddle.net/EVYRE/4. The #sidebar width would be relative to his parent (#sidebar_wrap), but it’s not, and it overflows his parent.
I think this only works because there is only one div between the fixed element and the window. This wouldn’t work if the fixed element is nested many times over in elements that aren’t 100% of the window width
Try adding a transform to the parent (doesn’t have to do anything, could be a zero translation) and set the fixed child’s width to 100%
Some relative item placed item By using jquery you can set any kind of width 🙂
EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.
«Inside the floating relative div I have a fixed div which I would like the same size as its parent» — Inside the «#wrap» he has ‘#fixed’ which he likes to have the same size as the ‘#wrap’ div(height is already set so i didn’t change it). Please explain me which part of it I didn’t get? And which part of the result differs from the other answers?
Hey buddy, no offence . actually the question was to provide a answer in css, for which you introduced jQuery, which should have been suggestion than answer.
I know I even upvoted the other solution with the margins, but i don’t see why can’t anyone place a jquery solution. Imagine if 5-6 months from now someone finds this question via google and considers the jquery solution more appropriate for his case?
I agree your solution is perfect in terms of jquery scope but not in plain css. when i`m not using Jquery lib, do you expect me to use it just becuase i found a simple solution in jquery like you have posted.a Jquery lib file is of 32 KB zipped / 91.6 KB (production mode) / 252 KB (development mode).its really not feasable for one to use jQuery lib, if its not worth. one possible disadvantage of jQuery or key point in terms of performance on the site
This breaks if you resize the window. Now you have to do onresize calculations, cool, sounds expensive. nty
man your container is 40% of the width of the parent element
but when you use position:fixed, the width is based on viewport(document) width.
thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width
so you just need to change your #fixed class to
if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.
You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.
I tried this initially but the problem is that when you scroll it moves along with rest of the divs, thus it’s not really the behavior of fixed positioning
On top of your lastest jsfiddle, you just missed one thing:
But, how this will solve your problem? Simple, lets explain why is bigger than expect first.
Fixed element #sidebar will use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inherit and #sidebar_wrap has 40% as value in width, then will calculate window.width * 40% , then when if your window width is bigger than your .container width, #sidebar will be bigger than #sidebar_wrap .
This is way, you must set a max-width in your #sidebar_wrap , to prevent to be bigger than #sidebar_wrap .
Check this jsfiddle that shows a working code and explain better how this works.
CSS Layout Fixed-Width
I thought this would solve it. But when I render, the root css does not adhere to 1008px value. Also root’s background-color does not show as #FFFFFF i.e. White. It still shows my body ‘s background-color . What am I doing wrong? UPDATE: To anyone interested I have found excellent ready-made CSS layouts at http://www.dynamicdrive.com/style/layouts/category/C12/
I’d suggest adding #god_container < width: 1008px; >to your css, that way the container element for your page respects the width (also, using max-width and min-width might be useful.
@Marcel, I think the intent is to center the background both vertically and horizontally (though if that’s necessary with a repeat-y background is unknown).
@marcel as david said. the image is like a drop shadow. I want to have it vertically (on the left & right edges) of div.root . But this is what is not happening.
BTW, why did you put all those spaces in your CSS? Copy-pasting results in a horrible line wrapping here.
3 Answers 3
Giving the background-image and color to the body, makes sure it is displayed on all pages, and have the #god_container act as a wrapper for the page, center it by margin:0 auto; and give it the width:1008px; .
Also you don’t have to give the position:static; to the #god_container wrapping div, instead use position:relative; to make sure all child divs, are placed inside it even if positioned absolutely.
At last, giving #root a width:100% will place the div to it’s parent div width.
Not sure if I’m missing something here, but it could be much simpler. You don’t need a wrapper DIV. the body can handle that. All you need is your root DIV.
Assigning CSS width to a position:fixed element
Note only in jsfiddle #1 do the yellow and red divs widths match up regardless of how you resize the browser. Unfortunately, jsfiddle#2 is more of a real world scenario and I’m wondering how to correct the id=»fixed» div such that its width also matches up with id=»content» div.
3 Answers 3
You can to it this way FIDDLE (to set % relative to the #main) fixed element’s dimensions always is calculated relative to the root element, so you need to reset % -unit accordingly in this particular case you need to set:
It is case #main is 95%, your static element is 90% relative to the main. So you need to calculate its width towards the root element ( 1 * .95 * .9 = .855 )
And you need to make sure you set object-fit correctly. I just had an image set to object-fit: cover; Size was messed up. Setting object-fit: contain; fixed it.
Easy one my friend. Fixed width elements are yanked from their parents and are now relative in width to the window, so in both situations the fixed div is always relative to the size of the window, but when in a parent container with a width other than 100% the fixed element will remain relative to the window width but the non-fixed position element is now relative to the parent width. So the non-fixed element became 90% of the 95% of the window while the fixed element remained a constant 90% of the window only.
If you wish to match the widths you can use jquery like this:
No way to do this using just CSS without having to get the calculator out? I hate doing JS style manipulation.
In modern CSS, the width of #fixed can be calculated using the following:
You would still need to know the width to which the other element is set (i.e. it won’t automatically update the width of #fixed if the matching element width CSS value is changed) but at least there’s no need to get out the calculator.