PDA

Click to See Complete Forum and Search --> : float left without wrapping

esthera
12-01-2006, 12:35 AM
i have div#extra{margin-left:160px; padding-top:10px; padding-left:0px; }

#navigation {
width:160px;
float:left;
}


but the problem is if what's in div id=extra is longer then the navigation bar it wraps under the navigation bar.


How can i make it that it will just keep in it's own collumn. (as it would in a table)
Fang
12-01-2006, 01:06 AM
float:right; perhaps, but without seeing the full markup it's guesswork.
esthera
12-01-2006, 01:32 AM
no that puts the div extra underneath and not to the right.

if the navigationis a width of 160 then why doesn't margin-right work?
Centauri
12-01-2006, 06:07 AM
What you have SHOULD basically work as intended, however it WILL depend on other objects which contain and surround these ones. As Fang says, we need to see the full page code to work out the problem.

Cheers
Graeme
WebJoel
12-01-2006, 08:21 AM
i have div#extra{margin-left:160px; padding-top:10px; padding-left:0px; }

#navigation {
width:160px;
float:left;
}


but the problem is if what's in div id=extra is longer then the navigation bar it wraps under the navigation bar.


How can i make it that it will just keep in it's own collumn. (as it would in a table)
Need to see your code to know what you are doing, but I interpret this a few ways.
The 'first read' will be the 'first display', so if "navigation" is encountered in your HTML AFTER id="extra", it WILL be 'under'.
Put your "navigation" first in the HTML, and "extra" will 'float:left;" (stay to the immediate right of the previous element encountered~), and stay put.
Here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
html, body {border:0; padding:0; margin:0;}
div#extra{margin-left:170px; padding-top:10px; padding-left:0px; border:1px solid red;}

#navigation {
width:160px; border:1px solid green;
float:left;
}
</style>
<script type="text/javascript"><!--
// -->
</script>
</head>
<body>
<div id="navigation"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p></div>
<div id="extra"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p></div>

</body>
</html>