Hi,
I want to put two divs next to each other. The right div is about 200px; en the div left must fill up the rest of the screen width? How can i do this?
I don't want to use percents because then my layout is crap :)
Thnx
+5
A:
Unfortunately, this is not a trivial thing to solve for the general case. The easiest thing would be to add a css-style property "float: right;" to your 200px div, however, this would also cause your "main"-div to actually be full width and any text in there would float around the edge of the 200px-div, which often looks weird, depending on the content (pretty much in all cases except if it's a floating image).
EDIT: As suggested by Dom, the wrapping problem could of course be solved with a margin. Silly me.
roe
2009-01-15 08:52:46
+1 for me stealing most of your answer :)
Dominic Rodger
2009-01-15 08:58:44
'float: left' will be more suitable, the lft div is required the span all of the left area. No offences meant, just consider.
Mohit Nanda
2009-01-15 09:03:14
+7
A:
I've tended to do this using the method roe gave, I think adding a margin-right: 200px to your main div ought to deal with the wrapping problem.
Dominic Rodger
2009-01-15 08:54:29
+12
A:
You can use CSS float and a margin properties to solve it.
Div 1 -- on the right side
float: right;
width: 200px;
Div 2 -- on the left of Div 2, covering the entire available area
float: left;
margin-right: 200px;
Mohit Nanda
2009-01-15 09:01:04
This is actually the correct answer, is concise, and - unlike the two currently above it - is completely self-contained. Best answers on SO should be just like this, IMO. +1
Bobby Jack
2010-06-02 10:30:57
+1
A:
To paraphrase one of my websites that does something similar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
Rowland Shaw
2009-01-15 09:03:12
Not me, but I'd guess the CSS hacks, the transitional doctype, or the lack of explanation?
annakata
2009-01-21 10:47:45
At least it had a doctype :)I guess it might be people not liking the browser hacks for the margins on IE. At least I'd tested it...
Rowland Shaw
2009-01-26 13:04:20
+2
A:
The method suggested by @roe and @MohitNanda work, but if the right div is set as float:right;, then it must come first in the HTML source. This breaks the left-to-right read order, which could be confusing if the page is displayed with styles turned off. If that's the case, it might be better to use a wrapper div and absolute positioning:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
Demonstrated:
left rightEdit: Hmm, interesting. The preview window shows the correctly formatted divs, but the rendered post item does not. Sorry then, you'll have to try it for yourself.
David Hanak
2009-01-15 09:05:08
+1
A:
As everyone has pointed out, you'll do this by setting a float:right; on the RHS content and a negative margin on the LHS.
However.. if you don't use a float: left; on the LHS (as Mohit does) then you'll get a stepping effect because the LHS div is still going to consume the margin'd space in layout.
However.. the LHS float will shrink-wrap the content, so you'll need to insert a defined width childnode if that's not acceptable, at which point you may as well have defined the width on the parent.
However.. as David points out you can change the read-order of the markup to avoid the LHS float requirement, but that's has readability and possibly accessibility issues.
However.. this problem can be solved with floats given some additional markup
(caveat: I don't approve of the .clearing div at that example, see here for details)
All things considered, I think most of us wish there was a non-greedy width:remaining in CSS3...
annakata
2009-01-15 09:48:12
A:
div1 - float: right; div2 - float: left; ..this will work ok as long as you set 'clear:both' for the element that separates this two column block
ccpizza
2009-12-02 22:25:48
When using floats, you have to set the width property. So I don't think this is a good solution..
Martijn
2009-12-04 13:59:09
+1
A:
I don't know if this is still a current issue or not but I just encountered the same problem and used the CSS display: inline-block; tag.
Wrapping these in a div so that they can be positioned appropriately.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file.
russholio
2010-06-02 06:38:47