CSS positioning

HTML & CSS
1

So I was trying out to see if this was possible at all.
On a HTML page there are “Header”, “Content”, & “Links” sections in that given order. Is is possible using css to get the links section (properly and expanded) above the content section without using absolute positioning or changing the HTML.

Am I looking at something that’s impossible ? See code, I can’t really increase its width much.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>TEST</title>
    <style type="text/css">
        #header{border-bottom:solid black 1px;}
        #NAV
        {
            float:left;
            width:69%;
            border:solid black 1px;
        }
        #CONTENT
        {float:right;width:49%;border:solid black 1px;margin-top:120px;}

    </style>
</head>
<body>
<div id="container">
	<div id="HEADER"><h1>HEAD</h1></div>

	<div id="CONTENT">
		<h3><span>Content is here</span></h3>
		<p class="p1">
		        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
                Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
                Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
                Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla.
                Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
                Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique.
		</p>
	</div>
	<div id="NAV">
		<ul>
			<li><a href="/" >Link #1</a></li>
			<li><a href="/" >Link #2</a></li>
			<li><a href="/" >Link #3</a></li>
		</ul>
    </div>
</div>

</body>
</html>
2

You just have too much width so the nav drops (it being later in the source compared to the content)

The content has 49% width (lets nto talk about padding/margins/borders). The nav has 69% width. Is that over 100%? Yes.

Make the nav 50% width and it’ll be fixed (due to it being less than 100% total width) :slight_smile:

3

Make the nav 50% width and it’ll be fixed (due to it being less than 100% total width)

Yeah sure about that. But the question is, is it possible to bring it flow like “Header” > “Links” > and then “Content” without using absolute positioning.

4

Just add float:left; to the <li>'s and that will make them display inline :slight_smile:

5

I think he means the order of the sections.

Why are you avoiding AP? Are you equally adverse to RP? And do any of these sections have explicit height?

OR is the page a set WIDTH?

if so you could try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
		    body, html, h1,h2,h3, ul, li, p {padding:0; margin:0;}
			#head{background: silver; }
			#shell { margin:0 auto; width:650px;}
			.nav { float:left; background: orange; width:100%;}
			.nav li { float:left;   list-style:none;}
			.nav a {display:block;   text-decoration:none; padding:.5em .5em; }
			#content{float: left;width:0px; clear:left; margin-top:2em}
			#content > * {width:650px;}
			#foot {clear: both; background: teal; }
		</style>
	</head>
	<body>
			<div id="shell">
				<div id='head'>
					<h1>Logo</h1>
					<p>branding and stuff</p>
				</div>
				<div id="content">
						<h2>head</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
				<ul class="nav">
					<li><a href="#">item</a></li>
					<li><a href="#">item</a></li>
					<li><a href="#">item</a></li>
					<li><a href="#">item longer sample item</a></li>
					<li><a href="#">item</a></li>
				</ul>
				<div id="foot"> This would be the footer</div>
			</div>
	</body>
</html>

Hope that helps.

6

@Ryan Your reply is not what I was looking for. I’m sorry, I should have explained more clearly.

I need the “NAV” block to come before the “CONTENT” block in the browser without using absolute positioning or changing the HTML (only css should be changed , see first post for the html). See attached image for how it should look.

This is not something that I’d want to do in real-life applications, it is just a test example to see if this is possible & if so, what is the best way to get this done. Thanks

7

@dresden_phoenix. Thanks for your post. That is exactly what I was looking for. I don’t think I would have figured this out on my own.
I still can’t get myself around the part where you put -> width:0px & then Content > * {width:650px;}, but that works.

To answer your questions, since this was just an example, I did not have much constraints (height,width, etc.) to it. As for absolute positioning, I always thought it was not a good idea to use it in site layout.

Thanks