2 Column Div Layout: Right Column With Fixed Width, Left Fluid

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support.

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Explore Teams Create a free Team
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs 2 column div layout: right column with fixed width, left fluid Ask Question Asked 13 years, 4 months ago Modified 8 years, 2 months ago Viewed 209k times 164

My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:

div.container { position: fixed; float: left; top: 100px; width: 100%; clear: both; } #content { margin-right: 265px; } #right { float: right; width: 225px; margin-left: -225px; } #right, #content { height: 1%; /* fixed for IE, although doesn't seem to work */ padding: 20px; } <div class="container"> <div id="content"> fooburg content </div> <div id="right"> test right </div> </div>

I get the following with above code:

|----------------------- -------| | fooburg content | | |-------------------------------| | | test right | |----------------------- -------|

Please advise. Many thanks!

• css
• html

Share Follow edited Aug 4, 2015 at 21:33 Joshua Taylor 85.4k99 gold badges160160 silver badges358358 bronze badges asked Mar 4, 2011 at 15:36 MrGMrG 5,2871717 gold badges4949 silver badges6666 bronze badges 0 Add a comment |

8 Answers 8

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 273

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container"> <div class="right"> right content fixed width </div> <div class="left"> left content flexible width </div> </div>

CSS:

.container { height: auto; overflow: hidden; } .right { width: 180px; float: right; background: #aafed6; } .left { float: none; /* not needed, just for clarification */ background: #e8f6fe; /* the next props are meant to keep this block independent from the other floated one */ width: auto; overflow: hidden; }​​

Example here: http://jsfiddle.net/jackJoe/fxWg7/

Share Follow edited Dec 5, 2012 at 9:54 answered Mar 4, 2011 at 15:39 jackJoejackJoe 11.1k88 gold badges5151 silver badges6565 bronze badges 13

• 2 @Mir A clear: both inside any of the columns won't affect the outside floats. This is not "fragile" unless you place the clear at the same level of the columns between the columns, if you place it at the end no harm is done. – jackJoe Commented Dec 1, 2012 at 20:22
• 6 I would consider using Adam's example. I don't think it's a good idea to put the right column before the left column in your html markup. – Danny_Joris Commented May 17, 2013 at 19:59
• 1 @Danny_Joris I agree. Also, if you use media queries, it's difficult now to push the right column below the left column – andrewtweber Commented Sep 3, 2013 at 19:29
• 2 For those who are curious about how it works, an explanation can be found here: stackoverflow.com/questions/25475822/… – Hashem Qolami Commented Oct 28, 2014 at 6:11
• 1 I wonder if there is a way to have the right column AFTER the left, so that it properly stacks (without using flexbox) – nanobar Commented Mar 10, 2015 at 13:29

| Show 8 more comments 73

See http://www.alistapart.com/articles/negativemargins/ , this is exactly what you need (example 4 there).

<div id="container"> <div id="content"> <h1>content</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p> <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p> </div> </div> <div id="sidebar"> <h1>sidebar</h1> <ul> <li>link one</li> <li>link two</li> </ul> </div> #container { width: 100%; background: #f1f2ea url(background.gif) repeat-y right; float: left; margin-right: -200px; } #content { background: #f1f2ea; margin-right: 200px; } #sidebar { width: 200px; float: right; Share Follow edited Apr 21, 2016 at 21:57 Dave Koo 46344 silver badges1212 bronze badges answered Mar 4, 2011 at 15:40 AdamAdam 5,04011 gold badge2626 silver badges3131 bronze badges 4

• 1 Fantastic, simple solution and keeps the correct HTML order too! – user1794295 Commented Jul 11, 2014 at 15:16
• I did not know about this. How did I not know about this. Perfect! I've been trying to do the whole 'fluid input, fixed-width search button', and obviously source order is really important here. This nails it. Thanks! – Malabar Front Commented Dec 1, 2014 at 11:25
• I like this solution because come mobile breakpoint time the right columns / sidebar will appear below not above the left column content. – dougtesting.net Commented Apr 2, 2017 at 0:50
• i couldn't get the right column to go to the top with this method. – mulllhausen Commented Feb 2, 2018 at 12:24

Add a comment | 29

Best to avoid placing the right column before the left, simply use a negative right-margin.

And be "responsive" by including an @media setting so the right column falls under the left on narrow screens.

<div style="background: #f1f2ea;"> <div id="container"> <div id="content"> <strong>Column 1 - content</strong> </div> </div> <div id="sidebar"> <strong>Column 2 - sidebar</strong> </div> <div style="clear:both"></div> <style type="text/css"> #container { margin-right: -300px; float:left; width:100%; } #content { margin-right: 320px; /* 20px added for center margin */ } #sidebar { width:300px; float:left } @media (max-width: 480px) { #container { margin-right:0px; margin-bottom:20px; } #content { margin-right:0px; width:100%; } #sidebar { clear:left; } } </style> Share Follow answered Dec 4, 2012 at 16:56 community wiki Loren 2

• 1 Great solution. Keeping the right below the left in HTML is crucial for layouts such as blogs, where the left has more important content. – Jake Commented Jan 14, 2014 at 21:00
• 3 Excellent answer! Here's a working example on Codepen: codepen.io/martinkrulltott/pen/yNxezM – Martin Commented Jul 21, 2015 at 1:40

Add a comment | 13

Simplest and most flexible solution so far it to use table display:

HTML, left div comes first, right div comes second ... we read and write left to right, so it won't make any sense to place the divs right to left

<div class="container"> <div class="left"> left content flexible width </div> <div class="right"> right content fixed width </div> </div>

CSS:

.container { display: table; width: 100%; } .left { display: table-cell; width: (whatever you want: 100%, 150px, auto) }​​ .right { display: table-cell; width: (whatever you want: 100%, 150px, auto) }

Cases examples:

// One div is 150px fixed width ; the other takes the rest of the width .left {width: 150px} .right {width: 100%} // One div is auto to its inner width ; the other takes the rest of the width .left {width: 100%} .right {width: auto} Share Follow answered Mar 8, 2015 at 22:53 Benjamin BouchetBenjamin Bouchet 13.2k22 gold badges4242 silver badges7474 bronze badges 4

• Nice, worked well thanks. Sometimes there is a time and place for tables when flexbox is not a viable alternative. Rather than putting right content before in the DOM which doesn't stack properly.. – nanobar Commented Mar 10, 2015 at 13:39
• 1 I like that this is a 'clean' solution. However, the only problem with putting your divs in table-cell mode is that you might as well use Tables & Tds. And you will end up loosing features like overflow scrolling etc. – MarzSocks Commented Jun 18, 2016 at 14:33
• That is unfair, because this solution is at least semantically correct and friendly towards simply RWD techniques, whilst using a table with tds most certainly is not! – ianp Commented May 12, 2017 at 15:41
• This method easily allows for a media query to drop the Table for a regular divs if the columns get to narrow. Nice and clean. I like. – AnthonyVO Commented May 14, 2018 at 11:52

Add a comment | 6

I'd like to suggest a yet-unmentioned solution: use CSS3's calc() to mix % and px units. calc() has excellent support nowadays, and it allows for fast construction of quite complex layouts.

Here's a JSFiddle link for the code below.

HTML:

<div class="sidebar"> sidebar fixed width </div> <div class="content"> content flexible width </div>

CSS:

.sidebar { width: 180px; float: right; background: green; } .content { width: calc(100% - 180px); background: orange; }

And here's another JSFiddle demonstrating this concept applied to a more complex layout. I used SCSS here since its variables allow for flexible and self-descriptive code, but the layout can be easily re-created in pure CSS if having "hard-coded" values is not an issue.

Share Follow answered Dec 22, 2015 at 3:46 Illya MoskvinIllya Moskvin 33311 gold badge44 silver badges1616 bronze badges 0 Add a comment | 2

This is a generic, HTML source ordered solution where:

• The first column in source order is fluid
• The second column in source order is fixed
  • This column can be floated left or right using CSS

Fixed/Second Column on Right

#wrapper { margin-right: 200px; } #content { float: left; width: 100%; background-color: powderblue; } #sidebar { float: right; width: 200px; margin-right: -200px; background-color: palevioletred; } #cleared { clear: both; } <div id="wrapper"> <div id="content">Column 1 (fluid)</div> <div id="sidebar">Column 2 (fixed)</div> <div id="cleared"></div> </div>

Fixed/Second Column on Left

#wrapper { margin-left: 200px; } #content { float: right; width: 100%; background-color: powderblue; } #sidebar { float: left; width: 200px; margin-left: -200px; background-color: palevioletred; } #cleared { clear: both; } <div id="wrapper"> <div id="content">Column 1 (fluid)</div> <div id="sidebar">Column 2 (fixed)</div> <div id="cleared"></div> </div>

Alternate solution is to use display: table-cell; which results in equal height columns.

Share Follow edited May 23, 2017 at 12:10 CommunityBot 111 silver badge answered Feb 10, 2015 at 16:21 Salman ASalman A 270k8383 gold badges436436 silver badges528528 bronze badges 4

• second column on the right won't work. if the left column have full of text, your right column will display as a new row. – TomSawyer Commented May 6, 2015 at 9:00
• have you ever tried to put more content and resize. just tested your code and didn't work. – TomSawyer Commented May 7, 2015 at 4:49
• @TomSawyer I am not sure what you are talking about. Here is me trying to put more content: jsfiddle.net/salman/mva6cnxL and jsfiddle.net/salman/mva6cnxL/1. Works flawlessly. – Salman A Commented May 7, 2015 at 6:18
• Just what I searched for. Thanks – user9168386 Commented Aug 5, 2018 at 13:35

Add a comment | 0

Hey, What you can do is apply a fixed width to both the containers and then use another div class where clear:both, like

div#left { width: 600px; float: left; } div#right { width: 240px; float: right; } div.clear { clear:both; }

place a the clear div under left and right container.

Share Follow answered Mar 4, 2011 at 15:48 tigerstyletigerstyle 11 Add a comment | -3

I have simplified it : I have edited jackjoe's answer. The height auto etc not required I think.

CSS:

#container { position: relative; margin:0 auto; width: 1000px; background: #C63; padding: 10px; } #leftCol { background: #e8f6fe; width: auto; } #rightCol { float:right; width:30%; background: #aafed6; } .box { position:relative; clear:both; background:#F39; } </style>

HTML:

<div id="container"> <div id="rightCol"> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> </div> <div id="leftCol"> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.

</div> </div> <div class="box"> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p> </div> Share Follow answered Sep 27, 2013 at 18:15 RiG SEO ServiceRiG SEO Service 1133 bronze badges 1

• Original question wants a right column with fixed size. – Dr. Aaron Dishno Commented Apr 21, 2016 at 22:38

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• css
• html

or ask your own question.

• Featured on Meta
• Upcoming sign-up experiments related to tags
• Policy: Generative AI (e.g., ChatGPT) is banned
• The [lib] tag is being burninated
• What makes a homepage useful for logged-in users

Linked

16 Fixed width div on right, fill remaining width div on left 5 CSS: Centered, fluid left, fixed right, source ordered layout with min/max width 1 Two divs (left, right) in parent, right with fixed width, left fill free space, both in same line. (without position relative/absolute) 1 Div - "fill the rest of the line" 5 Why does CSS float not change the width of the following div? 3 Change the width of a SINGLE JQuery Mobile Input field? 7 Why does order of float div and non-float div matter only in some cases? 3 CSS3: responsive centered row with variable size outter-elements 3 Left input takes all available space 2 3 column layout (fixed, fluid, fixed) with minimum width See more linked questions

Related

0 Two column layout with one having a fixed width in CSS 50 Two column div layout with fluid left and fixed right column 12 2 column layout (Left column fixed width, right fluid + clear:both) 0 Two Column Div Layout: Left = Fluid, Right = Fixed and Scrollable 0 2-Column Div Layout with both columns fluid 2 Side by side div where right div has fixed width 2 CSS Left Column fluid & Right Column fixed width 1 Two column layout with left fluid and right fill the rest width 1 2 columns, one side fluid , one side fixed 0 Two column layout with fixed margins in between columns and one column fluid, one fixed?

Hot Network Questions

• What does Athena mean in this passage of book 3 of the Odyssey?
• Is there any other reason to stockpile minerals aside preparing for war?
• How do I find the order of the subgroup in a Diffie-Hellman key exchange?
• Did Tolkien give his son explicit permission to publish all that unfinished material?
• What’s the highest salary the greedy king can arrange for himself?
• What are these courtesy names and given names? - confusion in translation
• Did the BBC censor a non-binary character in Transformers: EarthSpark?
• Was Paul's Washing in Acts 9:18 a Ritual Purification Rather Than a Christian Baptism?
• Can a satellite generate electricity by using a planet's magnetic field?
• Ceramic capacitor has no voltage rating, recommendations?
• Turning Misty step into a reaction to dodge spells/attacks
• How is Victor Timely a variant of He Who Remains in the 19th century?
• Is it prohibited to consume things that unclean animals produce?
• Predictable Network Interface Names: ensX vs enpXsY
• How many steps are needed to turn one "a" into at least 100,000 "a"s using only the three functions of "select all", "copy" and "paste"?
• Navigation on Mars without Martian GPS
• How do guitarists remember what note each string represents when fretting?
• How would I say the exclamation "What a [blank]" in Latin?
• How to make D&D easier for kids?
• Duplicating Matryoshka dolls
• Why was the animal "Wolf" used in the title "The Wolf of Wall Street (2013)"?
• Using Suica to train from Shinjuku to Kawaguchiko
• Sitecore XP 10.3.1 content updates on remote (replicated) CD server are always one version behind
• Sangaku problem involving eight circles

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html