asked on

CSS float size

Hello experts,

I just started tinkering with CSS and I'm stuck with a problem that probably has a really simple solution. My site has a left floating navigation bar that has a width of 200px and to the right of that I have a left floating content section that's giving me problems. I just started by typing in some text in the content area to test the layout but without a specific width the area was too wide and got bumped belove the navigation bar.
I don't want to set a specific px width on the content area as that would look funny on screens with different resolution to my laptop screen. I tried giving it a % width but that also just factors in the optimal % width on MY screen. I tried giving it a width of 90% - 200px but that does not seem to work.

Maybe this isn't even a width thing but something completely different.

Please let me know if anything is unclear.

qwerty021600

Can u share the url ya code?

myderrick

How about creating a container £container { width: 960px} and putting the two divs within this div.

OR

Specify a big enough width eg. 500px for the right div

Can you send the codes?

MD

abel

This question is a double of https://www.experts-exchange.com/questions/24344640/CSS-float-size.html?cid=295.

Please continue discussion in the other and delete this one. Posting double questions or cross-posting is not allowed by EE guidelines.

Mannsi

ASKER

Here is the code, cp from my project.

I got the navigation list from some site which explains why it's 100x more fancy than the rest of the code.

Once you add a bunch of text in the content area the problem shows up.

Thanks.

XHTML:
  <div id="navcontainer">
  	<ul id="navlist">
  		<li><a href="#">Link1</a></li>
  		<li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
  	</ul>
  </div>
 
<div id="content">
      <p> A bunch of text</p>
</div>
 
CSS:
#navcontainer
{
	float:left;	
	margin-right: 90;
}
#navlist
{	
margin-top: 90px;
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navlist li a { text-decoration: none; }
 
#content
{
	float:left;	
	margin-top: 70px;
	margin-left: 90px;
}

Open in new window

Mannsi

ASKER

abel: aren't you posting a link to THIS question ?

abel

> This question is a double of ....

apologies. Mistake of EE. I received a double notification... Please ignore my comment.

qwerty021600

Give this in CSS:
<style>
#navcontainer
{
float:left;
margin-right: 90;
width: 200px;
}

#content
{
float:left;
margin-top: 70px;
margin-left: 90px;
width: auto;
}

abel

> abel: aren't you posting a link to THIS question ?

haha, indeed I am. I got two email notifications of this question being asked. Normally that surmounts to a double question, and I didn't look too closely at the link... and then it appeared the same...

myderrick

Once you use float you should specify a width.

Try 60% width

MD

Mannsi

ASKER

qwerty: it doesn't appear to change anything.

qwerty021600

Give width in percentage to #content.

myderrick

qwerty's option is better.

Width: auto

MD

ASKER CERTIFIED SOLUTION

myderrick

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mannsi

ASKER

width:auto; doesn't do anything for me ???

qwerty021600

on which browser r u checking it.. as it is tested on IE6, 7 and FF

Mannsi

ASKER

wait, didn't see MD's post before I posted before, will try the code...

SOLUTION

qwerty021600

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mannsi

ASKER

Tried the code and it still bumps below the links. I'm using FF 3.0

Strange

Mannsi

ASKER

Tried both code's, still bumps down.

myderrick

Ok...bad news.

I tried on an old 640 X 480 monitor. I see the problem.

The Analysis

When you use percentages, it has to be relative to something.

In you case it is relative to my screen size. Now if my screen size becomes 640px (using 200px and 60% eg), 60% becomes 384px + margins (90+85) = 559px. When you add the navigation 200px = 759px. This forces the content to drop because it cannot fit the screen.

The best solution will be to specify a wrap div with a fixed width eg 1080 or 960 and the 60% will be 60% of 1080px or 960px which is better.

Another option will be to use percentages for the navigation as well say 40% (be mindful of the margin-left).

Let us know how far you have gone with it.

MD

myderrick

Try this code then. 60% with or without a wrap div at 100%.

IE6,7,8, FF

Good Luck

MD

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer
{
        float:left;     
        margin-right: 15px;
		width: 200px;
}
#navlist
{       
margin-top: 90px;
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navlist li a { text-decoration: none; }
 
#content
{
        float:left;     
        margin-top: 70px;
 
        
		width: 60%
}       
 
#wrap { position: relative;width:100%}/** Optional***/
 
</style>
 
</head>
 
<body>
 
<div id="wrap">
 <div id="navcontainer">
        <ul id="navlist">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
        </ul>
  </div>
 
<div id="content">
      <p> A bunc;dsfldsfdsf;ldsf'ldsfldsf;dslfds;sdfds;fdslfds;flsddddddddddddddddddddddddddddfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfsdfdslfldsf;ds;fldsfds</p>
      <p>fdsfdsfdsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffl</p>
      <p>dfds</p>
      <p>fds</p>
      <p>fs</p>
      <p>sdfsdfds</p>
      <p>sdfdsf</p>
      <p>sh of tkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
      <p>klkl</p>
      <p>ljkext</p>
</div>
 
</div></body>
</html>

Open in new window

myderrick

Also note that I took away the margin-left from the #content

#content
{
float:left;
margin-top: 70px;

width: 60%
}

MD