How to make this layout?

Discussion in 'CSS' started by melado, Jul 24, 2007.

0
  1. #1
    Hi!

    I have been messing around with XHTML and CSS all this past week and I don't manage to get exactly what I want. I'm trying to create a layout where there is two separate areas: the left sidebar (with fixed width) and the content, at right (liquid width). Here is a little dirty sketch:

    [​IMG]

    By the moment, this looks easy, doesn't it? It's a classical layout, and there are plenty of examples all over the web...

    But I want to be that the sidebar is AFTER the content in the XHTML. All of the samples and layouts that I've found put the sidebar BEFORE the content, and I don't want that.

    I tried using some techniques, but all fall in the same problem: they need to have the sidebar before the content.

    Any ideas, samples, similar layouts already done?

    Thanks!
     
    melado, Jul 24, 2007 IP
  2. Angelosanto

    Angelosanto Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Float the sidebar to the right, and the content to the left then
     
    Angelosanto, Jul 24, 2007 IP
  3. melado

    melado Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Okay, I got a simpler solution: using position: absolute with the sidebar (and left: 0) and apply margin-left of the width of the sidebar to the content.

    And it works!
     
    melado, Jul 24, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    and if your content is shorter than your sidebar, your whole layout will break - especially if you decide you also want a footer.

    Generally speaking, absolute positioning should be avoided like the plague... compared to flow based layouts it breaks WAY too often.

    I would probably code that:

    
<!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"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Left Column test</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

#header_n_content {
	margin-left:12em;
}

.wrapper {
	width:100%;
	float:right;
	background:#FCC;
}

h1 {
	padding:0.25em;
	background:#FFC;
}

#content {
	padding:0.5em;
}

#sidebar {
	float:left;
	width:11em;
	padding:0.5em;
	background:#CCF;
}

#footer {
clear:both;
background:#CFC;
text-align:center;
padding:8px;
}

</style>

</head><body>

<div id="header_n_content">
	<div class="wrapper">
		<h1>Logo goes here<span></span></h1>

		<div id="content">
			<h2>left column after header and content in source</h2>
			<p>Some test content</p>
			<p>Some test content</p>
			<p>Some test content</p>
			<p>Some test content</p>
			<p>Some test content</p>
			<p>Some test content</p>
			<p>Some test content</p>
		</div>

	</div>
</div>

<div id="sidebar">
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
</div>

<div id="footer">
	Test footer
</div>

</body></html>
    Code (markup):
    That's about what you are looking to do, right? You'd have to use faux columns if you want the styling to stretch, but the elements themselves should be where you want.
     
    deathshadow, Jul 24, 2007 IP