nadavvin Posted March 30, 2007 Share Posted March 30, 2007 I want to do two layouts which placed in the same row.I don't want to use in absolute or float: <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>test</title> <style> body { direction:rtl; width:700px; display:block; } #a { width:100%; height:30px; background-color:#ff0000; } #b { width:25%; margin-left:75%; height:50px; background-color:#00ff00; } #c { width:25%; margin-right:75%; height:50px; background-color:#0000ff; } </style></head><body> <div id="a"> </div> <div id="b"> </div> <div id="c"> </div></body></html> How do I do it? Link to comment Share on other sites More sharing options...
real_illusions Posted March 30, 2007 Share Posted March 30, 2007 maybe its just me, but i dont understand what your after.If you want 2 coloumns side by side, that are divs, then your going to have to use floats if you want a fluid design. i.e - it shrinks and grows in accordance of the users browsers dimensions.Your css doesn't make much sense in terms of a design point of view. You have all 3 divs over lapping each other in some way or another.. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 31, 2007 Share Posted March 31, 2007 #b { width:25%; margin-left:75%; height:50px; background-color:#00ff00; float:right; } That works. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 31, 2007 Share Posted March 31, 2007 But is this what you really want? Columns on each side and a div in the middle? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>test</title> <style type="text/css" > <!-- notice this? required for xhtml strict as per your Doctype --> body { direction: rtl; width:700px; display:block; } #a { width:100%; height:30px; background-color:#ff0000; } #b { width: 25%; height:50px; background-color:#00ff00; float:left; } #d { width: 50%; height:50px; background-color:#00ffff; float:left; } #c { width:25%; float:left; height:50px; background-color:#0000ff; } </style></head><body> <div id="a"> </div> <div id="b"> </div> <div id="d"> </div> <div id="c"> </div></body></html> And neither Firefox nor Opera, two very standards compliant Browsers, will respect the 700px width. Because the columns are a percentage width, they will use the screen width to calculate the width of the columns. If you don't want the flexible design that offers, simply state a width in pixels on everything. There are advantages both ways. depends on what you want the site to look and behave like. Try both. Link to comment Share on other sites More sharing options...
nadavvin Posted March 31, 2007 Author Share Posted March 31, 2007 It's okey, I get answer that ir is not possible with the condition I set, now it work with tham.thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now