Forum Moderators: not2easy
First of all, this is my first post here so..hello! :)
I have a small (i hope..) problem with positioning this div on my page..it's a tableless design, that stretches almost across the full width of the page. I won't paste the CSS code here because it is rather long for a forum posting imo, so I'll just post a link for you to test and see.. I hope someone could help me, I promise to do the same for other CSS newbies when I become a master myself :)
Here is the link: <edit>
It's the "maroon" sort of colored div, I've highlighted it for you, and it's called "rightcontent".
What I want to do is position the "rightcontent" div next to the "leftcontent" div, currently containing the login boxes, search, and few other boxes, so it would stretch across the remaining space inside the "content" div (that has both "leftcontent" and "rightcontent" inside). I've tested it on 800x600,1024x768 and 1280x1024 resolutions and works fine in IE..if only it would align correctly in other browsers too..
It's a project I have to finish in about a week now and this is where I've come to a standstill.. I'm no CSS expert, that is why I am asking for your help. If anyone can help me find a solution to this, I would be very grateful..
Thank you
(And please excuse my english..)
Gabriel
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
[edited by: tedster at 2:29 pm (utc) on May 27, 2005]
Your code is:
#rightcontent {
margin: 0px;
padding: 0px;
float: left;
clear: right;
position: relative;
background-color: #996600;
}
change to the following..
#rightcontent {
position: absolute;
top: 200px; /* allows for header on page */
left: 210px; /* allows for left menu */
margin: 0px;
padding: 0px;
background-color: #996600;
}
You are using floating and positioning and all that is needed here is the positioning. Using absolute positioning ensures the right page content will always be in this position, allowing for left menu and header. One thing to be aware of with positioning is that this is always in relation to the containing block that your DIV is in. If your rightcontainer was inside another container which was positioned 200px from the top, then your right container would end up 400px from the top.
hope this helps
ZA
P.S. please check the terms of use for this site [webmasterworld.com...] there should be NO posting of URL links into your messages...
I'm sorry for posting the URL's..I hope the moderators won't delete my thread as I can't edit it for some strange reason...
Thank you zackattack for your code..However, I think I should have specified that I want the "content" div to stretch down if the "rightcontent" has a bigger height than the "leftcontent" and the other way around.. What I mean is, I wanted to avoid using position:absolute because, like in the code you've given me, that would make my "rightcontent" flow out of the "content" div once it's height is bigger than "leftcontent" height. Thank you for taking the time to reply though.. I wish it would have been so simple.. :(
Gabriel
#leftcontent {
position: absolute;
width:150px;
top: 100px;
left:20px;
padding:10px;
z-index:1;
}
and make your rightcontent relative:
#rightcontent {
position:relative;
width:auto;
min-width:120px;
margin: 100px 210px 20px 170px;
padding:10px;
z-index:2;
}
Play around with the margin settings to fit.
The problem you will get as regards cross-browser compatibility is the differences in the way that IE and Netscape etc interpret the standard.
You'll most probably see differences in the width of your leftcontent div from browser to browser. There are workarounds but these seem to vary in effectiveness. Other than that you would need to look at using alternate style sheets for the different browsers.
Hope this helps!
cEM
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style media="all" type="text/css">
body {
margin: 0px;
padding: 0px;
}
#container {
width: 99%;
background-color: #99CC00;
}
div#content {
background-color: #EBE5CE;
background-image: url(../images/content_top.gif);
background-repeat: no-repeat;
background-position: right top;
float: left;
width: 100%;
}
#leftcontent {
width: 201px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
background-color: #00CC00;
min-height:100%;
z-index: 1;
}
#rightcontent {
margin: 0px;
padding: 0px;
float: left;
position: relative;
z-index: 2;
width: auto;
background-color: #990000;
}
#monthly {
margin: 0px;
padding: 20px 0px 0px;
float: left;
}
#monthly #leftside {
margin: 0px 10px 0px 0px;
padding: 0px;
}
#monthly #leftside h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
margin: 0px 0px 10px;
padding: 20px 0px 0px;
background-image: url(../images/hdr_monthly.gif);
display: block;
background-repeat: no-repeat;
background-position: left top;
}
#monthly #leftside p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
line-height: 16px;
margin: 0px;
padding: 0px 0px 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="leftcontent">
<p>dsadas das da sd asd as d
</p>
<p>das</p>
<p>sada</p>
<p>da</p>
<p>sd</p>
<p>asd</p>
<p> </p>
</div>
<div id="rightcontent">
<div id="monthly">
<div id="leftside">
<h1>Splinter Cell: Chaos Theory</h1>
<!-- gameside ends -->
<p>Aliquam dolor ligula, laoreet vel, pellentesque sit amet, luctus et, nulla. Donec porta elit id mauris. Ut pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sagittis ipsum placerat tortor. Phasellus id tortor eget eros porta venenatis. Nulla facilisi. Donec sed urna at arcu accumsan gravida. Morbi dapibus justo nec quam. Phasellus vitae risus sagittis leo interdum pulvinar. Suspendisse magna purus, ullamcorper a, pellentesque sed, aliquet eu, tellus.</p>
<p>Aliquam dolor ligula, laoreet vel, pellentesque sit amet, luctus et, nulla. Donec porta elit id mauris. Ut pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sagittis ipsum placerat tortor. Phasellus id tortor eget eros porta venenatis. Nulla facilisi. Donec sed urna at arcu accumsan gravida. Morbi dapibus justo nec quam. Phasellus vitae risus sagittis leo interdum pulvinar. Suspendisse magna purus, ullamcorper a, pellentesque sed, aliquet eu, tellus.</p>
<p>Aliquam dolor ligula, laoreet vel, pellentesque sit amet, luctus et, nulla. Donec porta elit id mauris. Ut pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sagittis ipsum placerat tortor. Phasellus id tortor eget eros porta venenatis. Nulla facilisi. Donec sed urna at arcu accumsan gravida. Morbi dapibus justo nec quam. Phasellus vitae risus sagittis leo interdum pulvinar. Suspendisse magna purus, ullamcorp</p>
</div>
<!-- leftside ends -->
</div>
</div>
</div>
</div>
</body>
</html>
I hope this will help you get a better view of my problem.. Try testing it in IE (in which it works), Firefox and Opera. These last two place the rightcontent div under the leftcontent and stretch it across the "content" div..
Thank you so much for your replies..
Sketcher
These last two place the rightcontent div under the leftcontent and stretch it across the "content" div
This is due to how compliant browsers calculate the value for width:auto. There is an equation used (you can see it in the specs here [w3.org]) to calculate box layouts. In this equation, width:auto equals all of the room that remains after margin, padding and borders are applied. In this case, with no margin, padding or borders on the div, the calculated value for width is 100% of the parent container. This might seem wonky at first, given the presence of that 201px wide div floating next to it, but it makes sense when you consider that floats are removed from the flow. While the inline text boxes of float adjecent elements are moved aside by a float, the actual block level element, itself, is not. So the browser is attempting to place a 201px wide div and a 100% wide div next to each other...result: float wrapping.
To get things in order, you have to convince the browser to clear room for the first float. Accomplish this by doing the following:
1) Remove the float:left from .monthly and .rightcontent.
2) Add margin-left:201px to .rightcontent. This removes the 201px on the left of .rightcontent from the calculated width of .rightcontent, allowing it to fill only the remaining width of the container.
Note that you will then likely run into some visual issues when one or the other column is longer than the other. As long as the floated column is longer, there won;t be a problem (since the container is floated it will enclose the floated children), but when the non-floated div is longer, the floated column will not extend to the bottom of the container, leaving a different background color underneath.
To fix this, run a search on an article called "faux Columns" by Dan Cedarholm. His technique involves creating a 1px high, left positioned, repeating background for the container that mimics the appearance of the float's background and borders. The result is the appearance of two equal height columns.
cEM
Perfect..thanks again for your help!
Sketcher
