Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS float size

Posted on 2009-04-22
22
Medium Priority
?
397 Views
Last Modified: 2012-08-13
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
Comment
Question by:Mannsi
  • 7
  • 7
  • 5
  • +1
22 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24203413
Can u share the url ya code?
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24203442
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
 
LVL 39

Expert Comment

by:abel
ID: 24203520
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Mannsi
ID: 24203528
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
 

Author Comment

by:Mannsi
ID: 24203553
abel: aren't you posting a link to THIS question ?
0
 
LVL 39

Expert Comment

by:abel
ID: 24203560
> This question is a double of ....

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

Expert Comment

by:qwerty021600
ID: 24203563
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
 
LVL 39

Expert Comment

by:abel
ID: 24203573
> 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
 
LVL 13

Expert Comment

by:myderrick
ID: 24203606
Once you use float you should specify a width.

Try 60% width

MD
0
 

Author Comment

by:Mannsi
ID: 24203609
qwerty: it doesn't appear to change anything.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24203618
Give width in percentage to #content.
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24203637
qwerty's option is better.

Width: auto

MD
0
 
LVL 13

Accepted Solution

by:
myderrick earned 1000 total points
ID: 24203657
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
 

Author Comment

by:Mannsi
ID: 24203667
width:auto; doesn't do anything for me ???
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24203677
on which browser r u checking it.. as it is tested on IE6, 7 and FF
0
 

Author Comment

by:Mannsi
ID: 24203689
wait, didn't see MD's post before I posted before, will try the code...
0
 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 1000 total points
ID: 24203708
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
 

Author Comment

by:Mannsi
ID: 24203723
Tried the code and it still bumps below the links. I'm using FF 3.0

Strange
0
 

Author Comment

by:Mannsi
ID: 24203736
Tried both code's, still bumps down.
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24203815
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
 
LVL 13

Expert Comment

by:myderrick
ID: 24203896
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
 
LVL 13

Expert Comment

by:myderrick
ID: 24203916
Also note that I took away the margin-left from the #content

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

       
            width: 60%
}  

MD
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month21 days, 1 hour left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question