Forum Moderators: not2easy
Anyone know how to have the blue box in left, green in middle and red in right without using position absolute?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>title</title><style type="text/css"> div.container { background-color: yellow; padding: 5px; } div.text { width: 500px; background-color: green; } div.col1 { background-color: blue; } div.col2 { background-color: red; } div.col1, div.col2 { margin: 5px; width: 100px; }</style></head><body><div class="container"> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc iaculis gravida ipsum. Proin dignissim semper ante. In pharetra. Ut viverra odio ac risus. Sed id nisl. Vestibulum risus metus, nonummy eget, suscipit id, faucibus vestibulum, quam. Quisque et justo ac ligula pharetra pretium. Integer tincidunt. Maecenas quam dolor, dictum eu, posuere nec, fringilla ac, justo. Praesent euismod, risus vitae egestas facilisis, felis mauris suscipit mi, eget tristique erat nisi sed quam. Phasellus dolor ante, rhoncus in, semper a, porttitor quis, tortor. Praesent dignissim imperdiet ante. Morbi sagittis malesuada sapien. Pellentesque condimentum, lorem at dignissim pharetra, arcu velit pulvinar elit, quis porta dui purus eget nisi.</p> <p>Donec sit amet pede nec turpis rhoncus dictum. Mauris hendrerit augue eget justo. Nunc interdum hendrerit lectus. In hac habitasse platea dictumst. Mauris lobortis. In sapien metus, fermentum ut, semper nec, ultrices vitae, massa. Nullam consequat porttitor justo. Nulla ut ante. Donec vulputate pede. Proin iaculis nulla eget libero. Morbi felis. Sed lacus neque, dictum blandit, tincidunt lobortis, iaculis eget, pede. </p> </div> <div class="tools"> <div class="col1">1 A</div> <div class="col1">1 B</div> <div class="col1">1 C</div> <div class="col2">2 A</div> <div class="col2">2 B</div> <div class="col2">2 C</div> <div class="col2">2 D</div> </div></div></body></html>
Is this a 'predefinied' piece of html or are you able to configure it yourself?
Why do I say this: when you want the blue in left and the red in right, you'd better not put them in the same div ('tools'), but in two separate divs. Then you can use 'position:relative' and 'float:left' or 'float:right' to position them correctly.
To get the green box in the middle, use 'position: relative;' and 'margin: 0px auto;'.
Hope this will help a bit.
The idea is to do a html layout before the css, I know how to do that in other way, but i really don't want to touch to my html...
if I use margin: 0 auto; to position my green container on the middle, the blue and red container will not be position around thatone.
Did you tryed using this html?
The 'margin: 0 auto;' to position your green container on the middle, will indeed not position the blue and red container around the green one. It's only used to position the green one in the middle.
The easiest way to achieve the 3cols layout is to separate the blue divs from the red ones, put them in their own little container.
If you try something like this it should work.
NOTE: I've put another container around your container to make the overflow work and floated the green div to the left:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>title</title>
<style type="text/css">
div.container {
display:block;
margin: 0 auto;
position:relative;
}
div.container2{
background-color: yellow;
padding: 5px;
display:block;
overflow:auto;
float:left;
}
div.text {
width: 500px;
background-color: green;
margin: 0px auto;
float:left;
}
div.tools_blue {
float:left;
}
div.tools_red {
float:right;
}
div.col1 { background-color: blue; }
div.col2 { background-color: red; }
div.col1, div.col2 { margin: 5px; width: 100px; }
</style></head><body>
<div class="container">
<div class="container2">
<div class="tools_blue">
<div class="col1">1 A</div>
<div class="col1">1 B</div>
<div class="col1">1 C</div>
</div>
<div class="text"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc iaculis gravida ipsum. Proin dignissim semper ante. In pharetra. Ut viverra odio ac risus. Sed id nisl. Vestibulum risus metus, nonummy eget, suscipit id, faucibus vestibulum, quam. Quisque et justo ac ligula pharetra pretium. Integer tincidunt. Maecenas quam dolor, dictum eu, posuere nec, fringilla ac, justo. Praesent euismod, risus vitae egestas facilisis, felis mauris suscipit mi, eget tristique erat nisi sed quam. Phasellus dolor ante, rhoncus in, semper a, porttitor quis, tortor. Praesent dignissim imperdiet ante. Morbi sagittis malesuada sapien. Pellentesque condimentum, lorem at dignissim pharetra, arcu velit pulvinar elit, quis porta dui purus eget nisi.</p> </div>
<div class="tools_red">
<div class="col2">2 A</div>
<div class="col2">2 B</div>
<div class="col2">2 C</div>
<div class="col2">2 D</div>
</div>
</div>
</div>
</body>
</html>
Hope this will help.
Anyone know how to have the blue box in left, green in middle and red in right without using position absolute?
Just a thought as it is going against your initial query of not using absolute positioning, but absolute positioning could be a desirable method in this situation... to create a 3-column fluid layout. The theory... if your overall 'container' DIV has position:relative then any absolutely positioned DIVs inside this container are positioned relative to this conatiner. Your left and right DIVs could be positioned absolutely. Your centre content DIV is allowed to flow (position:static) in the middle (with large left and right margins to clear the left and right columns).
This method has the advantage that you can mark-up your column DIVs in any order you like in the code, so enabling you to position your content first to be SE friendly.
btw, position absolute will limit the page height by the green container..
in the case of a new div, it's will be better to use float left on green blue and red, and use a float left width 100% on the big container
div.container {
background-color: yellow;
float: left;
width: 100%;
}
div.text {
width: 300px;
background-color: green;
margin-left: 150px;
display: inline;
float: left;
}
div.tools {
float: left;
width: 220px;
margin-left: -100px;
}
div.tools div {
margin: 5px 0;
width: 100px;
}
div.tools div.col1 {
position: relative;
background-color: blue;
left: -320px;
float: left;
clear: left;
}
div.tools div.col2 {
background-color: red;
float: right;
clear: right;
}
IE6 & 7 = Exactly what I need
Firefox PC, Firefox Mac & Safari = Trouble with float-left clear-left
If anybody have idea to fix the result, that will be really appreciate.
[edited by: tedster at 2:14 pm (utc) on Oct. 1, 2007]
