• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • Last Modified:

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.
0
Mannsi
Asked:
Mannsi
  • 7
  • 7
  • 5
  • +1
2 Solutions
 
qwerty021600Commented:
Can u share the url ya code?
0
 
myderrickCommented:
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

0
 
abelCommented:
This question is a double of http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24344640.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.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
MannsiAuthor Commented:
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

0
 
MannsiAuthor Commented:
abel: aren't you posting a link to THIS question ?
0
 
abelCommented:
> This question is a double of ....

apologies. Mistake of EE. I received a double notification... Please ignore my comment.
0
 
qwerty021600Commented:
Give this in CSS:
<style>
#navcontainer
{
        float:left;    
        margin-right: 90;
            width: 200px;
}

#content
{
        float:left;    
        margin-top: 70px;
        margin-left: 90px;
            width: auto;      
}
0
 
abelCommented:
> 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...
0
 
myderrickCommented:
Once you use float you should specify a width.

Try 60% width

MD
0
 
MannsiAuthor Commented:
qwerty: it doesn't appear to change anything.
0
 
qwerty021600Commented:
Give width in percentage to #content.
0
 
myderrickCommented:
qwerty's option is better.

Width: auto

MD
0
 
myderrickCommented:
qwerty's option works for me. See my code below.

Tested on IE6,7,8, FF

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: 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;
		width: auto
}       
 
/**** Optional  #wrap { position: relative; width: 100%}****/
 
</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

0
 
MannsiAuthor Commented:
width:auto; doesn't do anything for me ???
0
 
qwerty021600Commented:
on which browser r u checking it.. as it is tested on IE6, 7 and FF
0
 
MannsiAuthor Commented:
wait, didn't see MD's post before I posted before, will try the code...
0
 
qwerty021600Commented:
copy this code:
<!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>
#navcontainer
{
        float:left;    
        margin-right: 90;
            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;
        margin-left: 90px;
            width: auto;      
}
</style>
</head>

<body>
 <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 A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text A bunch of text</p>
</div>

</body>
</html>
0
 
MannsiAuthor Commented:
Tried the code and it still bumps below the links. I'm using FF 3.0

Strange
0
 
MannsiAuthor Commented:
Tried both code's, still bumps down.
0
 
myderrickCommented:
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
0
 
myderrickCommented:
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

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

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

       
            width: 60%
}  

MD
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 7
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now