Problems lining up content

Hi guys, wondered if you could help with my design -

I’m having problems lining up the left and right sidebar and main content divs side by side, also I’ve had to negative pad these to shift them up the page because the background image header-section.jpg is so tall (it needs to be as it fades in). I’ve tried a couple of things, like dividing header-section into to a putting the fade part beneath the black nav area as a no-repeat background image for the container but if I specify the width it stops top-stretch.jpg and bottom-stretch.jpg from stretching. If I just put 100% it doesn’t center properly.

Any help would be greatly appreciated, here’s the link (http://dwardusprime.co.uk/test/test.html) and code:

<html>
<head>
<title>text here</title>

<style type="text/css">

/* # */

body {
    margin:0 auto;
    text-align:center;
    font-family:georgia, times new roman;
}

#container {
}

#header-wrap {
    background-image:url(images/top-stretch.jpg);
    background-repeat:repeat-x;
    height:302px;
    width:100%;
}

#banner {
    background-image:url(images/header-section.jpg);
    height:362px;
    width:1086px;
    margin: 0 auto;
}

#navigation {
    padding-top:60px;
    /*padding-left:30px;*/
    color:#FFF;
}

#navigation ul {
  list-style:none;
}

#navigation li a {
    width:170px;
    text-decoration: none;
    float:left;
}

a:link, a:visited {
    color: #FFF;
}
    
#navigation li a:hover {
    /*margin:10px;*/
    background-color: #8C1018; 
    color: #FFF; 
}

#content {
    background-image:url(images/middle-stretch.jpg);
    background-repeat:repeat-y;
    height:100%;
    width:1086px;
    margin: 0 auto;
    clear:both;
}

#sidebar-left {
    padding-left:90px;
    margin-top:-120px;
    width:300px;
    color:#000;
    float:left;
    clear:both;
}

#content-middle {
    width:300px;
    color:#F00;
    float:left;
    clear:both;
}

#sidebar-right {
    width:300px;
    color:#00f;
    float:right;
    clear:both;
}

#footer-wrap {
    background-image:url(images/bottom-stretch.jpg);
    background-repeat:repeat-x;
    height:105px;
    width:100%;
}

#footer {
    background-image:url(images/footer-section.jpg);
    height:105px;
    width:1086px;
    margin: 0 auto;
}

#footer-links {
    padding-top:63px;
    /*margin-top:20px;*/
}

a {
    color:#FFF;
}

.footer-text {
    color:#FFF;
    display:inline;
}

</style>

</head>
<body>
    
    <!-- container start -->
    <div id="container">
        
        <!-- header section start --> 
        <div id="header-wrap">

            <div id="banner">
                <!-- navigation section start -->
                <div id="navigation">
                    <ul>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>

                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                    </ul>
                </div>
                <!-- navigation section end -->
            </div>

            <!-- banner section end -->
        </div>
        <!-- header section end -->
        
        <!-- content section start -->
        <div id="content">
            
            <!-- start left sidebar -->
            <div id="sidebar-left">
                <p>sdfsfsdfsdfs</p>

                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
            </div>
            <!-- end left sidebar -->
            
            <!-- start middle content -->
            <div id="content-middle">
                <p>sdfsfsdfsdfs</p>

                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
            </div>
            <!-- end middle content -->
            
            <!-- start right sidebar -->
            <div id="sidebar-right">
                <p>sdfsfsdfsdfs</p>

                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
            </div>
            <!-- end right sidebar -->
            
        </div>
        <!-- content section end -->
        
        <!-- footer section start -->
        <div id="footer-wrap">

            <div id="footer">
                    <!-- footer links section start -->
                    <div id="footer-links">
                        <a href="#">LINK</a> <p class="footer-text">TEXT TEXT TEXT</p>
                    </div>
                    <!-- footer links section end -->
            </div>

        </div>
        <!-- footer section end -->
    
    </div>
    <!-- container end -->

</body>
</html>

Hi,
Remove the clear:both from the #sidebar-right column and #content-middle.

Then remove the neg top margin from the left column and place it on Content, the parent of all three floats.

Also, remove that 100% height from Content and set overflow:hidden; on it to contain the floated children.

EDIT:
Looking at this again, setting the neg top margin on Content will not work the way you are using the BG images.
This may require another div within the Content to wrap all the floats in. Then you could possibly set the neg top margin on it.

It looks like you could also set the neg margin individually on all three floats

If you are wanting your page to have a full height appearance you will need to use min-height:100% on the main wrapping div and hook the repeating BG image there.

See the FAQ on “Sticky Footer” for the how to on that.

Thanks for all your help!

When I tested it on a different computer earlier I thought it looked OK in FF, Safari and Chrome but checking it on my mac here (different res) and IE my background stretch isn’t lining up correctly with the center.

http://dwardusprime.co.uk/test/test.html

I’ll check out that sticky footer faq you mentioned, thanks.

Hi,

You won’t be able to match the background on the body with the one in the main part of the page as it will jog out by 1px in IE dues to rounding errors. It would be better to use an inner wrapper instead. Be careful with styling the html element as it will have unexpected results. The only styles you really need for the html element are to reduce margin,padding and 100% height when needed. Leave everything else to the body

There is some muddled thinking going on in that page and you seem to be setting heights where they won’t work.:slight_smile: You can’t use 100% height on inner elements (see css faq on 100% height for the explanation)). You also have a height on the content container that is far too small for the content.

If you need three columns then float all three columns and then you can keep source order otherwise the left and right floats would need to be first in the html and then the static content follows last and wraps around. In a fixed width layout just float three columns as its much easier.

Here is rough rework with the sticky footer code added which is what I think you were aiming for.


<!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=utf-8">
<title>text here</title>
<style type="text/css">
/* # */
p {
    margin:0 0 1em;
}
a {
    color:#FFF;
}
a:link, a:visited {
    color: #FFF;
}
/* sticky footer*/
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#container:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/*  */

html, body {
    height:100%;
    margin:0;
    padding:0;
}
html, body {
    min-width:1086px;/* stop background from sliiding off*/
}
body {
    margin:0 auto;
    text-align:center;
    font-family:georgia, times new roman;
    text-align:center;
}
#container {
    background:url(http://dwardusprime.co.uk/test/images/middle-stretch.jpg) repeat-y 50% 0;
    text-align:left;
    width:1086px;
    margin:-257px auto 0;
    min-height:100%;
    position:relative;
    z-index:1;
}
* html #container {
    height:100%;
}
#header-wrap {
    text-align:left;
    background:url(http://dwardusprime.co.uk/test/images/top-stretch.jpg) repeat-x 50% 0;
    width:100%;
    position:relative;
    z-index:2;
    height:152px;
    overflow:hidden;
}
#banner {
    background:url(http://dwardusprime.co.uk/test/images/header-section.jpg) no-repeat 50% 0;
    height:152px;
    width:1086px;
    margin: 0 auto;
}
ul#navigation {
    list-style:none;
    margin:0 0 0 60px;
    padding:80px 0 0;
    color:#FFF;
}
#navigation li {
    display:inline
}
#navigation li a {
    text-decoration: none;
    float:left;
    margin:0 15px;
    display:inline;
}
#navigation li a:hover {
    background-color: #8C1018;
    color: #FFF;
}
#content {
    background:url(http://dwardusprime.co.uk/test/images/content-fade.jpg) no-repeat 0 0; /* bkg fades in */
    width:1086px;
    margin: 0 auto;
    padding:257px 0 1px;
    overflow:hidden;/* clear floats*/
}
#sidebar-left {
    width:185px;
    color:#000;
    float:left;
    margin:0 0 0 90px;
    display:inline;
    min-height:50px;
}
#content-middle {
    width:500px;
    color:#F00;
    float:left;
    margin:0 0 0 20px;
    min-height:50px;
}
#sidebar-right {
    width:185px;
    color:#00f;
    float:right;
    margin:0 85px 0 0;
    display:inline;
    min-height:50px;
}
* html #sidebar-left, * html #content-middle, * html #sidebar-right{height:50px}
#footer-wrap {
    background:url(http://dwardusprime.co.uk/test/images/bottom-stretch.jpg) repeat-x;
    height:105px;
    width:100%;
    clear:both;
}
#footer {
    background-image:url(http://dwardusprime.co.uk/test/images/footer-section.jpg);
    height:105px;
    width:1086px;
    margin: 0 auto;
}
#footer-links {
    padding-top:63px;/*margin-top:20px;*/
}
.footer-text {
    color:#FFF;
    display:inline;
}
</style>
</head>
<body>
<!-- container start -->
<div id="header-wrap">
    <div id="banner">
        <ul id="navigation">
            <li><a href="#">HOME</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">CHARACTERS</a></li>
            <li><a href="#">LOCATIONS</a></li>
            <li><a href="#">ARTICLES</a></li>
            <!--<li><a href="#">QUOTATIONS</a></li>-->
            <li><a href="#">MEDIA CENTRE</a></li>
            <li><a href="#">SWAG</a></li>
            <!--<li><a href="#">IDEAS</a></li>-->
            <li><a href="#">ABOUT</a></li>
        </ul>
    </div>
</div>
<!-- header section end -->
<div id="container">
    <div id="content-container">
        <div id="content">
            <div id="sidebar-left">
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
            </div>
            <div id="content-middle">
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
            </div>
            <div id="sidebar-right">
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
                <p>sdfsfsdfsdfs</p>
            </div>
        </div>
        <!-- content section end -->
    </div>
    <!-- footer section start -->
</div>
<!-- container end -->
<div id="footer-wrap">
    <div id="footer">
        <!-- footer links section start -->
        <div id="footer-links"> <a href="#">LINK</a>
            <p class="footer-text">Created by EE. Powered by Wordpress.</p>
        </div>
        <!-- footer links section end -->
    </div>
</div>
<!-- footer section end -->
</body>
</html>


Hi I’ve tried this on my local and its done the trick! Thanks so much, the only problem being the content-fade graphic doesn’t layer over the middle-stretch graphic so there’s no nice fade into the content. I’ll have more of a play around with the guidance you’ve given. Thanks!

Ah yes ok, the background -position needs to be moved down here.


#content {
    background:url(http://dwardusprime.co.uk/test/images/content-fade.jpg) [B]no-repeat 0 257px[/B]; /* bkg fades in */
    width:1086px;
    margin: 0 auto;
    padding:257px 0 1px;
    overflow:hidden;/* clear floats*/
}


That line is for IE6 and just ensures that the floated columns have some height to start with. If you had a left column with no content on some pages then the middle float would float all the way to the left instead of being in the middle.

The “* html” is a hack to target IE6 only. Other browsers are catered for with a min-height in the original rule but ie6 doesn;t understand min-height. However it does treat “height” as a minimum and will always expand to encompass its content. We have to hide that height rule from other browsers because they would restrict the element to that height only and content would spill out.

Brilliant, works great!

Can I just ask about this line, what’s the 50px for?

  • html #sidebar-left, * html #content-middle, * html #sidebar-right{height:50px}

Thanks again, will be sure to use what you’ve told me in the future :slight_smile:

Ah I see :), I wasn’t aware of the * hack, thanks for the explanation!