CSS Margin Problem

Question

Metalsiege 0 Light Poster

16 Years Ago

I've been working on a template using CSS, but I can't get the right side bar to line up flush like the left side bar is. It's driving me up the walls because I've been trying to mess with the right side bar's margins to fix it, but if I go -145 it drops below the rest of the content and sits on the left side. I've also included the files as attachments in a zip file. Any help would be very much appreciated. :-)

/* #########################
## Simple 3-Column Layout from CodeDesign.com
## Version 1.0
##########################*/

* {margin: 0px; padding: 0px; }

body {
	color: #FFFFFF;
	font-size: small;
	font-family: verdana, sans-serif;
	background: url(images/fade.jpg) repeat-x;
    background-color: #333;
	margin: 0px;
	padding: 0px;
}

a {
color:#EA7500;
text-decoration: none;
font-weight: bold;
padding: 1px 0px 1px 0px;
}
a:hover {color: #FFFFFF;}

/* 
#########################
## Header
##########################
*/
#header {
    width: 846px;
    border: 2px solid #fff;
    margin: 0px auto;
    padding: 0px 25px;
    background: #463C3C url(images/header_num2.jpg);
    height: 102px;
    clear: both;
    color: #585858;
}

#header h1 { 
    font-size: 230%;
    line-height: 100px;
    width: 400px;
    font-weight: normal;
    color: #fff;
    background: transparent;
}


/* 
#########################
## Structure
##########################
*/

#wrapper {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0px 30px 30px 30px;
	background-color: #222222;
    clear: both;
}

#main {
    margin: 0px auto;
    padding: 0px 25px;
    width: 850px;
    border-top: 5px solid #585858;
    clear: both;
}

#footer {
    margin: 0px auto;
    padding: 10px 20px;
    width: 860px;
    border-top: 2px solid #f8f8f8;
    background: #e5e5e5;
    clear: both;
}

/* 
#########################
## Content
##########################
*/
#content {
    margin: 0px 200px 30px 150px;
    padding: 0px 30px 20px 30px;
    width: 440px;
    float: left;
}

* html #content{
    display: inline;
}

.node {
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 20px 0px;
    border-bottom: 5px solid #585858;
}


/* 
##########################
## Left and Right Side bars
##########################
*/

#left {
    margin: 0px 0px 30px -875px;
    padding: 5px 5px 20px 5px;
    width: 150px;
    float: left;
    background: #585858;
	border-top: 10px solid #222222;
    border-bottom: 5px solid #585858;
}

#right {
    margin: 0px 0px 30px -150px;
    padding: 0px 0px 20px 0px;
    width: 150px;
    float: left;
    background: #585858;
	border-top: 10px solid #222222;
    border-bottom: 5px solid #585858;
}



/* 
#########################
## Other
##########################
*/
ul.nav {
    margin: 0px 0px 30px 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
}

ul.nav a{
    margin: 0px;
    padding: 0px 10px 0px 10px;
    display: block;
    height: 25px;
    line-height: 25px;
    font-weight: normal;
    font-size: 90%;
    background: #585858;
    color: #EA7500;
    border-bottom: 1px solid #585858;
}


ul.nav a:hover{
    color: #FFFFFF;
 /*   background: #ffffff; */
    border-bottom: 1px dashed #ea7500;
}

.clear { clear: both; width: 100%;}

form#searchform {
    float:right;
    font-size: 9px;
    margin-top: 35px;
}

form#searchform input {
    color: #B2D09D;
    background: transparent;
    border: 1px solid #B2D09D;
    font-size: 11px;
    padding: 3px;
}

form#searchform input:hover {
    background: #181818;
}

form#searchform .button {
    padding: 2px;
}

/* 
#########################
## Header Tags
##########################
*/
h1, h2, h3, h4, h5, h6 {
    color: #005073;
}

#content h1 { 
    font-size: 120%;
    line-height: 40px;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

h2 { 
    font-size: 160%;
    line-height: 20px;
    height: 40px;
    padding: 10px 0px;
    margin: 0px auto;
    text-align: center;
}

#left h2, #right h2 { 
    font-size: 120%;
    line-height: 40px;
    margin: 0px;
    text-align: center;
    padding: 0px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>GiGA Network -> Gaming in the Global Arena!/title>
<meta name="DESCRIPTION" content="GiGA Network -> Gaming in the Global Arena" />
<meta name="KEYWORDS" content="gamer, PS3, Xbox, 360, forum, community" />
<meta name="DISTRIBUTION" content="GLOBAL" />
<meta name="COPYRIGHT" content="Copyright 2008 GiGA-Network.net" />

<link href="cool2.css" rel="stylesheet" type="text/css" />
</head>
<body>





<div id="wrapper">

    <div id="header">
    </div>
    
    <div id="main">
    
        <div id="content">
            <div class="node">
            <h1>Why I like Latin Filler Text</h1>
            Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. Etiam eu enim. Mauris ipsum urna, rhoncus at, bibendum sit amet, euismod eget, dolor. Mauris fermentum quam vitae ligula. Vestibulum in libero feugiat justo dictum consectetuer. Vestibulum euismod purus eget elit. Nunc sed massa porta elit bibendum posuere. Nunc pulvinar justo sit amet odio. In sed est. Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem. <a href="#">Read More...</a>
            </div>
            <div class="node">
            <h1>Why I like Latin Filler Text</h1>
            Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. Etiam eu enim. Mauris ipsum urna, rhoncus at, bibendum sit amet, euismod eget, dolor. Mauris fermentum quam vitae ligula. Vestibulum in libero feugiat justo dictum consectetuer. Vestibulum euismod purus eget elit. Nunc sed massa porta elit bibendum posuere. Nunc pulvinar justo sit amet odio. In sed est. Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem. <a href="#">Read More...</a>
            </div>
            <div class="node">
            <h1>Why I like Latin Filler Text</h1>
            Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. Etiam eu enim. Mauris ipsum urna, rhoncus at, bibendum sit amet, euismod eget, dolor. Mauris fermentum quam vitae ligula. Vestibulum in libero feugiat justo dictum consectetuer. Vestibulum euismod purus eget elit. Nunc sed massa porta elit bibendum posuere. Nunc pulvinar justo sit amet odio. In sed est. Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem. <a href="#">Read More...</a>
            </div>
            
        </div>
        
        <div id="left">
            <h2>Left Side</h2>
            <ul class="nav">
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
            </ul>
            <h2>Left Side</h2>
            <p>Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem.</p>

        </div>
        
        <div id="right">
            <h2>Right Side</h2>
            <ul class="nav">
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
                <li><a href="#">List Item One</a></li>
            </ul>
            <h2>Right Side</h2>
            <p>Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem.</p>
        </div>
        
    </div>

    <br class="clear" />
    <div id="footer">
        <a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a> - <a href="http://code2design.com">Code 2 Design</a>
    </div>

</div>

</body>
</html>

html-css web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

gigasimple.zip (2.41 KB)

3 Contributors
5 Replies
138 Views
22 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by Metalsiege

MidiMagic 579 Nearly a Senior Poster

16 Years Ago

Several errors:

- 0px is not a valid style. use 0 for all zero values, with no unit of measure. 0 with a unit of measure makes a Firefox error. It creates a value which is not 0 instead.

- Don't put size styles (width, height) and nonzero surrounding styles (margin, border, padding) in the same style or tag. It won't work right, making incompatibilities in browsers. IE crams the surrounding styles INSIDE the width, Firefox and other standards-complying browsers put the surrounding styles OUTSIDE the width. If you need both, nest a tag with one kind inside a tag with the other kind.

- Use percentages for widths, instead of pixels or points.

macneato 29 Posting Pro in Training

16 Years Ago

Hi Metal,

Try this:

CSS:

/* CSS Document */ 
/* #########################
## Simple 3-Column Layout from CodeDesign.com
## Version 1.0
##########################*/
 
* {margin: 0px; padding: 0px; }
 
body {
	color: #FFFFFF;
	font-size: small;
	font-family: verdana, sans-serif;
	background: url(images/fade.jpg) repeat-x;
    background-color: #333;
	margin: 0px;
	padding: 0px;
}
 
a {
color:#EA7500;
text-decoration: none;
font-weight: bold;
padding: 1px 0px 1px 0px;
}
a:hover {color: #FFFFFF;}
 
/* 
#########################
## Header
##########################
*/
#header {
    width: 846px;
    border: 2px solid #fff;
    margin: 0px auto;
    padding: 0px 25px;
    background: #463C3C url(images/header_num2.jpg);
    height: 102px;
    clear: both;
    color: #585858;
}
 
#header h1 { 
    font-size: 230%;
    line-height: 100px;
    width: 400px;
    font-weight: normal;
    color: #fff;
    background: transparent;
}
 
 
/* 
#########################
## Structure
##########################
*/
 
#wrapper {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0px 30px 30px 30px;
	background-color: #222222;
    clear: both;
}
 
#main {
    margin: 0px auto;
    padding: 0px 25px;
    width: 850px;
    border-top: 5px solid #585858;
    clear: both;
	height:auto;
}
 
#footer {
    margin: 0px auto;
    padding: 10px 20px;
    width: 860px;
    border-top: 2px solid #f8f8f8;
    background: #e5e5e5;
    clear: both;
}
 
/* 
#########################
## Content
##########################
*/
#content {
    padding: 0px 30px 20px 30px;
    width: 450px;
    float: left;
}
 
* html #content{
    display: inline;
}
 
.node {
    padding: 0px 0px 20px 0px;
    border-bottom: 5px solid #585858;
}
 
 
/* 
##########################
## Left and Right Side bars
##########################
*/
 
#left {
    padding: 5px 5px 20px 5px;
    width: 150px;
    float: left;
    background: #585858;
	border-top: 10px solid #222222;
    border-bottom: 5px solid #585858;
}
 
#right {
    padding: 5px 5px 20px 5px;
    width: 150px;
    float: right;
    background: #585858;
	border-top: 10px solid #222222;
    border-bottom: 5px solid #585858;
}
 
 
 
/* 
#########################
## Other
##########################
*/
ul.nav {
    margin: 0px 0px 30px 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
}
 
ul.nav a{
    margin: 0px;
    padding: 0px 10px 0px 10px;
    display: block;
    height: 25px;
    line-height: 25px;
    font-weight: normal;
    font-size: 90%;
    background: #585858;
    color: #EA7500;
    border-bottom: 1px solid #585858;
}
 
 
ul.nav a:hover{
    color: #FFFFFF;
 /*   background: #ffffff; */
    border-bottom: 1px dashed #ea7500;
}
 
.clear { clear: both; width: 100%;}
 
form#searchform {
    float:right;
    font-size: 9px;
    margin-top: 35px;
}
 
form#searchform input {
    color: #B2D09D;
    background: transparent;
    border: 1px solid #B2D09D;
    font-size: 11px;
    padding: 3px;
}
 
form#searchform input:hover {
    background: #181818;
}
 
form#searchform .button {
    padding: 2px;
}
 
/* 
#########################
## Header Tags
##########################
*/
h1, h2, h3, h4, h5, h6 {
    color: #005073;
}
 
#content h1 { 
    font-size: 120%;
    line-height: 40px;
    margin: 0px;
    padding: 0px;
    text-align: left;
}
 
h2 { 
    font-size: 160%;
    line-height: 20px;
    height: 40px;
    padding: 10px 0px;
    margin: 0px auto;
    text-align: center;
}
 
#left h2, #right h2 { 
    font-size: 120%;
    line-height: 40px;
    margin: 0px;
    text-align: center;
    padding: 0px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
<title>GiGA Network -> Gaming in the Global Arena!/title>
<meta name="DESCRIPTION" content="GiGA Network ->  Gaming in the Global Arena" />
<meta name="KEYWORDS" content="gamer, PS3, Xbox, 360, forum, community" /> 
<meta name="DISTRIBUTION" content="GLOBAL" /> 
<meta name="COPYRIGHT" content="Copyright 2008 GiGA-Network.net" /> 
 
<link href="cool2.css" rel="stylesheet" type="text/css" /> 
<link href="layout.css" rel="stylesheet" type="text/css" />
</head> 
<body> 
 
 
 
 
 
<div id="wrapper"> 
 
    <div id="header"> 
    </div> 
 
    <div id="main"> 

        <div id="left"> 
            <h2> Left Side</h2> 
            <ul class="nav"> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
            </ul> 
            <h2> Left Side</h2> 
            <p> Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem.</p> 
 
        </div> 
 

       <div id="content"> 
            <div class="node"> 
            <h1> Why I like Latin Filler Text</h1> 
            Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. Etiam eu enim. Mauris ipsum urna, rhoncus at, bibendum sit amet, euismod eget, dolor. Mauris fermentum quam vitae ligula. Vestibulum in libero feugiat justo dictum consectetuer. Vestibulum euismod purus eget elit. Nunc sed massa porta elit bibendum posuere. Nunc pulvinar justo sit amet odio. In sed est. Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem. <a href="#"> Read More...</a> 
            </div> 
            <div class="node"> 
            <h1> Why I like Latin Filler Text</h1> 
            Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. Etiam eu enim. Mauris ipsum urna, rhoncus at, bibendum sit amet, euismod eget, dolor. Mauris fermentum quam vitae ligula. Vestibulum in libero feugiat justo dictum consectetuer. Vestibulum euismod purus eget elit. Nunc sed massa porta elit bibendum posuere. Nunc pulvinar justo sit amet odio. In sed est. Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem. <a href="#"> Read More...</a> 
            </div> 
            <div class="node"> 
            <h1> Why I like Latin Filler Text</h1> 
            Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. Etiam eu enim. Mauris ipsum urna, rhoncus at, bibendum sit amet, euismod eget, dolor. Mauris fermentum quam vitae ligula. Vestibulum in libero feugiat justo dictum consectetuer. Vestibulum euismod purus eget elit. Nunc sed massa porta elit bibendum posuere. Nunc pulvinar justo sit amet odio. In sed est. Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem. <a href="#"> Read More...</a> 
            </div> 
 
        </div> 
 

 
        <div id="right"> 
            <h2> Right Side</h2> 
            <ul class="nav"> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
                <li> <a href="#"> List Item One</a> </li> 
            </ul> 
            <h2> Right Side</h2> 
            <p> Phasellus ornare elementum nulla. Nulla ipsum neque, cursus a, viverra a, imperdiet at, enim. Quisque facilisis, diam sed accumsan suscipit, odio arcu hendrerit dolor, quis aliquet massa nulla nec sem.</p> 
        </div> 
 
    </div> 
 
    <br class="clear" /> 
    <div id="footer"> 
        <a href="http://validator.w3.org/check?uri=referer"> Valid XHTML</a>  - <a href="http://jigsaw.w3.org/css-validator/"> Valid CSS</a>  - <a href="http://code2design.com"> Code 2 Design</a> 
    </div> 
 
</div> 
 
</body> 
</html>

Let me know if it works.

Cheers

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Metalsiege 0 Light Poster · Answer 1 · 2008-06-10T21:13:40+00:00

Hmm.. I'll take a look at it again, Midi. I was lead to believe in a class I took that you can have 0px since it's pixels.. hehe.. Thanks for trying Macneato, but I wanted to leave the left bar on the left side and just align both on their separate sides to the edge of the header.

Metalsiege 0 Light Poster · Answer 2 · 2008-06-10T23:02:31+00:00

Several errors:
- 0px is not a valid style. use 0 for all zero values, with no unit of measure. 0 with a unit of measure makes a Firefox error. It creates a value which is not 0 instead.
- Don't put size styles (width, height) and nonzero surrounding styles (margin, border, padding) in the same style or tag. It won't work right, making incompatibilities in browsers. IE crams the surrounding styles INSIDE the width, Firefox and other standards-complying browsers put the surrounding styles OUTSIDE the width. If you need both, nest a tag with one kind inside a tag with the other kind.
- Use percentages for widths, instead of pixels or points.

Could you give me an example of a nested tag? I think I understand what you mean, but I want to be sure.

Metalsiege 0 Light Poster · Answer 3 · 2008-06-11T03:45:13+00:00

Nvm.. I fixed the problem myself. I just changed the content margins and adjusted the left/right side bar margins. Works like a charm now. Thanks for the ideas everyone.

#content {
    margin: 0px 200px 30px 175px;
    padding: 0px 30px 20px 30px;
    width: 440px;
    float: left;
    text-align: justify;
    text-justify: newspaper;
}

#left {
    margin: 0px 0px 30px -900px;
    padding: 5px 5px 20px 5px;
    width: 150px;
    float: left;
    background: #585858;
    border-top: 10px solid #222222;
    border-bottom: 5px solid #585858;
}

#right {
    margin: 0px 0px 30px -160px;
    padding: 5px 5px 20px 5px;
    width: 150px;
    float: left;
    background: #585858;
    border-top: 10px solid #222222;
    border-bottom: 5px solid #585858;
}