CSS Forum

**Arch_Angel_X** · 07-10-2007, 04:28 AM

hi guys!
I am have been struggling for the past 5 hours with my layout. I am doing self-exercise in order trying to create 3 columns elastic-liquid layout.
I amnot sure, why is not working!

I am trying to make the main content have same width and 10px padding from the main nav column but somehow, I couldn't control the gap between it.
other problem is, I also not sure hpw I can make the same exact 3 columns on the header.
by the way, my goal is to mimicking this guys web layout http://www.studiomikmik.co.uk/work/area.htm
Also, on the second column, I am planning to make some image gallery but with lightbox script.

can somebody please help fix this codes. thanks in advanced

this is my code:

HTML Code:

<!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=utf-8" />
<title>Three Col Hybrid Layout</title>
<style type="text/css">


/* Zero down margin and paddin on all elements */

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Verdana", sans-serif;
  line-height: 1.1;
  background-color:#ffffff;
}

h1 {
  font-size: 2.2em;
  font-weight: normal;
}

h2 {
  font-size: 2.0em;
  font-weight: normal;
}

p, li {
  font-size: 1.4em;
}

h1, h2, p {
  margin: 1em 0;
}



#wrapper {
  background-color: #fffffff;
}

#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}

#branding h1 {
  margin: 0;
}

#mainNav {
  list-style: none;
  background-color:#eee;
}

#secondaryContent {
  background-color:#ffffff;
}

#secondaryContent h2 {
  font-size: 1.6em;
  margin: 0;
}

#secondaryContent p {
  font-size: 1.2em;
}

#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}

/* The Core Div 
================================= */

body {
  font-size: 62.5%;
  text-align: center;
}

#wrapper {
  width: 75em;
  max-width: 100%; 
  margin: 0 auto; 
  text-align: left;
}

#mainNav { 
  width: 13em;
  max-width: 31%;
  float: left;
  border-style:solid;
  border-width:1px;
}

#content { 
  width: 60em;
  max-width: 75%; 
  float: right;
  border-style:solid;
  border-width:1px;
}

#mainContent { 
  width: 18em;
  max-width: 31%;
  float: left;
  border-style:solid;
  border-width:1px;
}

#secondaryContent { 
  width: 38em;
  max-width: 80%;
  float: right;
  border-style:solid;
  border-width:1px;
} 

#footer { 
  clear: both; 
} 

/* padding
================================== */

#mainNav,#mainContent, #secondaryContent {
  padding-top: 10px;
  padding-bottom: 10px;
}

#mainNav *,#mainContent * {
  padding-left: 10px;
  padding-right: 10px;
}

#mainNav * *, #mainContent * * {
  padding-left: 0;
  padding-right: 0;
}


-->
</style>
</head>

<body>

<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 

<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div> 

<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<img src="area1.jpg" />
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 

<div id="footer">
<p>Footer</p>
</div>


</div>

</body>
</html>

**StuntmanDesigns** · 12:35 PM

Please post the HTML so we can work with this. The names don't mean a whole lot without the HTML to back it up.

If I had to guess, it's that your float's are a bit funny. Here's how I would do it.

Code:

#left {
float: left;
}

#center {
float: left;
}

#right {
float: right;
}

That's basic as all get out, but it will do the trick. If you post the HTML as said, I can give you a better idea of how to work with it.

**angele803** · 07-10-2007, 01:47 PM

The HTML is further down in the code box that he posted. He is actually using CSS inside the HTML document.

I had a look at it and I am not sure I understand the problem. Do you want there to be spaces BETWEEN the divs? If so, you should use a margin instead of padding. Padding puts space inside the div rather than outside of the div.

**LadynRed** · 07-10-2007, 03:43 PM

I will assume that the problem is mostly with IE??
The code you posted is using min/max-width. IE 6 does NOT support min/max width (or height for that matter) and the only way you can make it even come close is by using some javascript.

**Arch_Angel_X** · 07-10-2007, 06:25 PM

No, lady, even with firefox, I am having a problem.
I am trying to cleaning the codes a bit but still doesn't work

now, the footer is the one is messed up

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Three Col Hybrid Layout</title>
<meta name="Designer" content="Razer Maharjan[Raj Kumar Maharjan] - razercode@yahoo.com" />
<style>
{  margin: 0;  padding: 0;}
body {  font-family: "Verdana", sans-serif;  line-height: 1.6;  background-color:#ffffff;font-size: 62.5%;  text-align: center;}
h1 {  font-size: 2.2em;  font-weight: normal;}
h2 {  font-size: 2.0em;  font-weight: normal;}
p, li {  font-size: 1.4em;}

#wrapper {  background-color: #fffffff;}
#branding {  height: 50px;  background-color:#b0b0b0;  }
#branding h1 {  margin: 0;}

#wrapper {  width: 778px;    margin: 0 auto;   text-align: left;display:block;}
#mainNav {   width: 180px;    float: left;  border-style:solid;  border-width:0px;display:block;background:#F5F3F0}
#content {   width: 593px;   float: right;  border-style:solid;  border-width:0px; display:block;}
#mainContent {   width: 18em;    float: left;  border-style:solid;  border-width:0px;display:block;margin-left:8px;background:#F5F3F0;padding-left:3px;}
#secondaryContent {background-color:#ffffff; width: 38em; float: right;  border-style:solid;  border-width:0px;display:block;background:#F5F3F0;padding-left:3px;}
#mainNav,#content{padding-top:10px;padding-bottom:10px;}

#footer {   display:block;background-color:#b0b0b0;  padding: 1px 20px;clear:both;height:100%;overflow:auto;}
</style>
</head><body><div id="wrapper">

<div id="branding"><h1>Branding</h1></div>
<div id="mainNav"> <ul > <li class="first"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Case Studies</a></li> </ul></div>
<div id="content">

<div id="mainContent">
<h1>Lorem ipsum dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div>
  <div id="secondaryContent"><h2>Magna aliquam erat volutpat</h2><img src="area1.jpg" /><p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</div>
<div id="footer"><p>Footer</p></div>

</div>


</body></html>

**LadynRed** · 07-10-2007, 06:30 PM

Doesn't look like you've CLEARED your floats - which you must do:

http://css-discuss.incutio.com/?page=ClearingSpace

**Arch_Angel_X** · 07-10-2007, 06:56 PM

Hi Lady, thanks for the article.

I fixed and combined the codes little bit its became like this s.
Plus, I don't think its going to be validate.
The one that I couldn't understand it is how I can control the size of each of my columns?

I think, I need a new CSS book and more advanced level. Can anyone recommend it one for me?

HTML Code:

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/* */
body {
  font-family: "Verdana", sans-serif;
  line-height: 1.1;
  background-color:#ffffff;
}

#wrapper {  background-color: #fffffff;}

#branding {  height: 50px;  background-color:#b0b0b0;  }
#branding h1 {  margin: 0;}

#wrapper {  width: 778px;    margin: 0 auto;   text-align: left;display:block;}

li, div.inline div
    {
    float: left;
    margin: 0 1em 0 0;
    padding: 0;
    background: #ffcc00;
    }
li a, div.inline div a
    {
    padding: 1em;
    margin: 0;
    display: block;
    }
li a:hover, div.inline div a:hover
    {
    background: #000000;
    color: #ffcc00;
    }
* html .inline li a, * html div.inline div a
    {
    display: inline-block;
    }
#footer {   display:block;background-color:#b0b0b0;  padding: 1px 20px;clear:both;height:100%;overflow:auto;}


</style>
</head>


<body>
<div id="wrapper">
    <div id="branding"><h1>Branding</h1></div>

<div class="inline">
    <div><a href="#">hello</a></div>
    <div><a href="#">still here</a></div>
    <div><a href="#">goodbye</a></div>
</div>

<div id="footer"><p>Footer</p></div>

</div>
</body>
</html>

**Arch_Angel_X** · 07-10-2007, 08:59 PM

errr ****! I still can't solved it . Is ther any other way y for this problems?

**LadynRed** · 07-11-2007, 01:24 PM

The width of the columns is done with the width property and to make a liquid layout, you have to set those widths in percentages or em's. You have a fixed width wrapper set to 778px wide - -it's not going to be fluid at all.

**LadynRed** · 07-11-2007, 01:42 PM

Try this instead:

Quote:

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/* */
body {
font-family: Verdana, sans-serif;
line-height: 1.1;
background-color:#ffffff;
}

#branding {
height: 50px;
background-color: #b0b0b0;
}
#branding h1 { margin: 0;}

#wrapper {
background-color: #fff;
width: 778px;
margin: 0 auto;
text-align: left;
display: block;
}

li
{
float: left;
margin: 0 1em 0 0;
padding: 0;
background: #ffcc00;
}
li a, div.inline div a
{
padding: 1em;
margin: 0;
display: block;
}
li a:hover, div.inline div a:hover
{
background: #000000;
color: #ffcc00;
}
* html .inline li a, * html div.inline div a
{
display: inline-block;
}

.columnA, .columnB, .columnC{
float: left;
width: 32.1%;
margin: 0;
padding: 0;
background: #ffcc00;
}

.columnB{
margin: 0 .9em 0 .9em;
}

#footer {
display: block;
background-color: #b0b0b0;
padding: 1px 20px;
clear: both;
height: 100%;
overflow: auto;
}

</style>
</head>

<body>
<div id="wrapper">
<div id="branding"><h1>Branding</h1></div>

<div class="inline">
<div class="columnA"><a href="#">hello</a></div>
<div class="columnB"><a href="#">still here</a></div>
<div class="columnC"><a href="#">goodbye</a></div>
</div>

<div id="footer"><p>Footer</p></div>

</div>
</body>
</html>

**Arch_Angel_X** · 07:06 AM

Thanks Lady! I will try it! Oh My god! I have been trying to fix it since yesterday
! By the way, I cam across some website and I am interesting adding this switch menu navigation called switch menu . http://www.dynamicdrive.com/dynamici...switchmenu.htm

I am trying to edit some code for make the font color change and also the sub menu have some hove menu plus after the user click it will change to the other color.

But somehow it just doesn't work.!

Do you guys have any resolution? I went to look at their forum and seems is lacking of the reply for this problem .

Also.. (I know! why I am asking too many questions))
I am trying to make this navigation **pics**

how I can make when the user mouse pointing to the box gonna change the color plus after they click it then its going to be different color? any other way than javascript? or flash?

**LadynRed** · 07-12-2007, 02:46 PM

You don't need Javascript of flash to do that, CSS will do that

**Arch_Angel_X** · 07-12-2007, 07:07 PM

errr can you give some clues? because I only can think using a tables for thhat kind of navigation.

**LadynRed** · 07-12-2007, 07:20 PM

Set your navigation in an unordered list. Here's a tutorial:
http://css.maxdesign.com.au/listutorial/index.htm