Login

04-22-2008, 02:18 PM

[eluser]Jamie Rumbelow[/eluser]
Hey!

I'm having a few troubles with my layout.

Screenshot

index.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

    &lt;link type="text/css" rel="stylesheet" href="style.css" /&gt;

    &lt;title&gt;JamieRumbelow.net&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

    <div id="header">

        <img alt="JamieRumbelow.net" src="images/logo.gif" />

        <div id="nav">

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Code</a></li>

            <li><a href="#">Tutorials</a></li>

            <li><a href="#">Contact</a></li>

        </ul>

    </div>

    </div>

    <div id="main">

        Test. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nullam rutrum nisl ac orci aliquet pharetra. Maecenas quis turpis a lorem elementum rutrum. Nullam posuere felis non lorem. Quisque dictum metus ac enim. Phasellus a nisi. Morbi volutpat. Praesent sed eros ut justo eleifend tempus. Praesent semper justo ac ligula. Nulla varius, nulla nec dignissim faucibus, tortor dui blandit erat, sed malesuada nisl erat sit amet mi. In ligula eros, pellentesque vitae, convallis id, adipiscing ut, diam. Aenean et erat. Donec diam est, euismod eu, gravida sit amet, placerat aliquet, nulla. Nam eleifend sapien sit amet justo. Mauris aliquet elit quis nisi.

    </div>

    <div id="sidebar">

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nullam rutrum nisl ac orci aliquet pharetra. Maecenas quis turpis a lorem elementum rutrum. Nullam posuere felis non lorem. Quisque dictum metus ac enim. Phasellus a nisi. Morbi volutpat. Praesent sed eros ut justo eleifend tempus. Praesent semper justo ac ligula. Nulla varius, nulla nec dignissim faucibus, tortor dui blandit erat, sed malesuada nisl erat sit amet mi. In ligula eros, pellentesque vitae, convallis id, adipiscing ut, diam. Aenean et erat. Donec diam est, euismod eu, gravida sit amet, placerat aliquet, nulla. Nam eleifend sapien sit amet justo. Mauris aliquet elit quis nisi.

    </div>

&lt;/body&gt;

&lt;/html&gt;

style.css

Code:
@charset "utf-8";

/* CSS Document */

body {

    background-color: #FFFFFF;

    margin: 0;

    padding: 0;

    font-family: arial, helvetica, sans-serif;

}

#header {

    background-color: #B5BF63;

    min-height: 171px;

}

#header img {

    padding: 1.73em;

}

#nav {

    margin-right: 3em;

}

#nav ul {

    list-style: none;

    float: left;

    text-align: right;

    padding-left: 0;

    margin-left: 0;

    width: 100%;

}

#nav li {

    display: inline;

    min-height: 41px;

}

#nav a {

    color: #000000;

    text-decoration: none;

    padding: .60em;

    width: 100%;

    background-color: #CCCCCC;

}

#nav a:hover {

    background-color: #B5BF63;

}

#main {

    background-color: #CCCCCC;

    min-width: 480px;

    margin-left: 20em;

    margin-right: 3em;

    padding: 1em;

}

#sidebar {

    float: left;

    width: 25%;

    padding-left: 25px;

}

Firstly, the main content div's background does not carry on untill the end of the page (or footer), and secondly, the sidebar's text doesnt fit properly. All the sizes and stuff are fine, i've checked.

What am I doing wrong?

Thanks,
Jamie

04-22-2008, 02:39 PM

[eluser]Jay Turley[/eluser]
Without sounding facetious, I have to point out that it is practically impossible to diagnose CSS or HTML problems without the ability to look at the source code.

04-22-2008, 02:43 PM

[eluser]Jamie Rumbelow[/eluser]
Ok! First Post updated!

04-22-2008, 03:02 PM

[eluser]Jay Turley[/eluser]
Okay, a couple things:

First of all, IMHO, if you have a link to a live version of the page, it makes it easier to troubleshoot, as that way there is no disconnect between what you are asking about and the code that helpers might view. For instance, using your CSS above, I pasted it into the html for my personal testing, but that might (although highly doubtful) be the source of a problem. In addition, look at the third point below. Because you and I are not looking at the same code, I can't be sure I am looking at the problem, or didn't inadvertently clean it up when simply cutting and pasting your code.

Second, typically, the background of CSS elements only extends as far as the element itself (margins/padding aside). One of the earliest methods of making a column background extend to 100% of the page-height is by use of faux columns (google for it, there's a good ALA article from 2004 on it). Another method I have heard of but not tried is using wrapper divs (http://articles.techrepublic.com.com/510...68973.html).

Third, the code you posted doesn't look like the screenshot (I am going to assume it is a previous version in the screenshot). When I pasted the CSS into a <style> tag in the HTML you wrote above, all the text looks fine to me, both sidebar and main column. I was not able to view the issues that were shown in the screenshot (using IE7 and FF2 on Windows XP Pro).

Perhaps someone else might have different results.

04-22-2008, 06:53 PM

[eluser]Firestorm ZERO[/eluser]
Move #sidebar before the #main. Note this will only look correct in 1024 res. In higher resolutions, the #sidebar pushes into #main. This is because your margin-left is in 20em. Plus also note the box model.

Divs shrink to the size of the content. As Jay said you can solve this either by faux columns, wrapping divs or 100% height. Search google on these methods.

Some extra suggestions, if you use Firefox get Firebug and Web developer extensions as they are extremely useful in debugging design layouts.

04-23-2008, 12:16 AM

[eluser]Yunus Khan[/eluser]
Hello,
Just write the following code for properly align the sidebar text.

#sidebar {
float: left;
width: 25%;
padding-left: 25px;
text-align :justify;
}

If you need more help please give me your expected design screenshot.

04-23-2008, 01:21 AM

[eluser]Jamie Rumbelow[/eluser]
Thanks guys for the help. Sorry I didn't post a link - the thought didnt seem to come across to me.

I have firebug installed, and I did use it.

Thanks,

Jamie

04-23-2008, 01:47 AM

[eluser]GSV Sleeper Service[/eluser]
you'll need to use the 'faux columns' technique to solve the background issue, and the sidebar is a mixture of a clear problem and not enough space for it to fit.

04-23-2008, 04:10 AM

[eluser]Lone[/eluser]
I have only been able to really sort out one way to solve this problem as all of the other ways just start to feel to 'hackish' to me as they have a fix for ever browser - I dont like this as it feels like when new version comes out it will break it. I like setups that need minimal to no 'hacks' for IE etc.

Below is my way of solving what you think are tryign to achieve:

HTML

Code:
<div id="main">

  <div id="content">

    content here

  </div>

  <div id="side">

    side content here

  </div>

  <div class="clearit"></div>

</div>

CSS

Code:
#main {

  background: url(../images/main_bg.gif) repeat-y;

}

#content {

  float: right;

  width: 75%;

}

#side {

  float: left;

  width: 20%;

}

.clearit {

  clear: both;

}

The cruicial thing from this setup is the '../images/main_bg.gif' image - this is tiled vertically and should be setup as the background you want to carry down the column.

04-23-2008, 12:54 PM

[eluser]Jamie Rumbelow[/eluser]
Thanks very much! I have everything working now!

Smile