Learn VBA & Macros in 1 Week!

CSS - Css 2 Column Fluid Layout Problem

Full Excel VBA Course - Beginner to Expert

Css 2 Column Fluid Layout Problem	View Content

I have an issue with a 2 column CSS layout.

Here is my code:

Code:

<style>
#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:70%;
    background:yellow;
}

</style>

<div id="container1">
    <div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis   augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere   sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
    <div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis   augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere   sem. In feugiat ante in orci ultricies non sagittis felis consectetur.   In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu   venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula   sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet   mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula.   Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi   tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed   cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere   tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat.   Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis   feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales   eget facilisis a, sollicitudin id lorem. </p>
            <p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut   commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat   volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse   nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac   habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent   nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam   sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum   lorem. Morbi pharetra sem at justo dictum non imperdiet libero   convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim   consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit   amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel   tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
   
</div>

Which produces this:

Basically, I need a set up on the columns so that if there is no content in the left column (col1) col 2 will fill up the missing area.

It doesn't work with the above code, specifically because of this part of the CSS

Code:

#col2 {
    float:left;
    width:70%;
    background:yellow;
}

Which makes col2 move to the left, but retains the 70% width

If i change the width to 100% or auto, then the col2 appears below col1 if I have content in col1.

If I put no width or float in col2, the content in col2 wraps around col1:

Help greatly appreciated

Full Excel VBA Course - Beginner to Expert

Css Layout:3 Column/fluid/float Problem

Similar Tutorials

View Content

At the moment I have a css layout nearly done.
It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div.

The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven.
A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that.

Layout CSS code
Code:

#body {
 position:relative;
 margin:0 auto;
 width:94%;
 min-width:50em;
 max-width:70em;
 border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
 height: 185px;
 background-color:#ffffff;
 background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {

 background: #ffffff url(../images/design/background_3.gif) repeat-y left;

 border-top:none;
 border-bottom:none;
}
#wrapper {

 background: url(../images/design/background_2.gif) repeat-y right;
}

#container {
 width: 100%;
 float: left;
 margin-right: -200px;
 background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
 margin-right: 200px;
 /*background: url(../images/design/background_3.gif) repeat-y left;*/

}
#main {
/*border:1px solid #000000;*/
 margin-left: 150px;
/*  background-color:#bbbbbb;*/
}
#left {
 position: absolute;
 top:189px;
 width: 140px;
/* height: 100%;*/
 float: left;
 text-align: left;
/* border-left: 2px solid #bbbbbb;*/
 font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
 width: 200px;
 float: right;
  clear:right;
}
#footer {
/* border: 1px solid #000000;*/
 background: #304773;
 height: 30px;

}

.last {
 margin-bottom: 0;
}
.clearing {
 height: 0;
 clear: both;
}

Div structu
Code:

  <div id="body">
    <div id="header"><h1>Welkom bij Overeem de Haas</h1>
    </div>
    <div id="outer_wrapper">

      <div id="wrapper">
        <div id="container">
          <div id="content">
          
            <div id="main">
            </div>

            <div id="left">
                 <? include ("../include/navigatie.inc"); ?>
            </div>

            
          </div>
        </div>
        <div id="sidebar">
            <? include ("../include/uitloggen.inc");?>
            <? include ("../include/winkelmand.inc"); ?>
        </div>
        <div class="clearing">&nbsp;</div>
      </div>

    </div>

    <div id="footer"><p class="content"></p></div>
  </div>

navigatie.inc code
Code:

    <div id="navigatie">
            <ul>
               <li class="menu">Navigatie menu</li>
               <li><a href="index.php">Home pagina</a></li>
               <li><a href="#">Wat is Overeem?</a></li>
               <? ...
                 echo "<li><a href=\"#\">Contact</a></li>";
                 echo "</ul>";
                 echo "</div>";
               ?>

Live example

Can anyone (dev)shed some light on this?
I just can't get it to work without messing up the 3rd column.

3-column Fluid-fixed-fluid Problem

Similar Tutorials

View Content

I'm trying to construct a complex 3-column CSS layout.
I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width.
All 3 columns should be able to contain centered or floated block elements and accept mouse events.

Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins.

The relevant CSS follows: Code:

html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
  float: left;
  height: 100%;
  /* 2nd attempt
  width: 50%;
  margin-right: 305px; */
}
#right {
  float: right;
  height: 100%;
  /* 2nd attempt
  width: 50%;
  margin-left: 305px; */
}
#center {
  margin: auto;
  height: 100%;
  width: 610px;
}

HTML-wise, the div order is #left, #right, #center.

Does anyone know of a way to work around this?

3 Column Fluid Layout

Similar Tutorials

View Content

Hi all,

I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big.

What happens in those cases is that the middle column tends to just write itself on top of the right column.

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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Three columns</title>
    <style type="text/css">
      body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
      .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
      .clearfix { display: block; }
      * html .clearfix { height: 1px; }
      .clearfix { display: block; }
      #base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
      #main_block { margin: auto; text-align: left; }
      #content { padding: 10px; padding-top: 2em; clear: both; }
      #container_1, #container_2 { margin: 0; padding: 0; }
      .three_column #middle_content_template { margin: 0 210px; }
      #left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
      #right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
      #left_content, #middle_content_template, #right_content_template { padding: 10px; }
    </style>
  </head>
  <body>  
    <div id="base">
      <div id="main_block">
        <div id="content">
          <div id="container_1">
            <div id="container_2" class="three_column">
              <div class="clearfix">
                <div id="left_content">
                  <p>Left box o' content.</p>
                </div>
                <div id="right_content_template">
                  <p>Right box o' content.</p>
                </div>
                <div id="middle_content_template">
                  <table>
                    <tr>       
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                      <td><p>Header</p></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right.

Additionally, I'd like the gray box to expand with it. Is this possible?

Header / Footer / 2 Column Layout With Fixed Left And Fluid Right W/out Javascript

Similar Tutorials

View Content

I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look:

http://www.chcs-ut.com/support.php?section=technical

Issue With Fluid-fixed-fluid Layout I'm Putting Together...

Similar Tutorials

View Content

Link he rpisolution dot com/test/

Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues.

btw, i know the CSS is probably ugly. sorry about that.

thanks

4 Column With One Fluid Column And Footer

Similar Tutorials

View Content

hi all, right have got a problem which has been bugging me for days now. i have 4 columns in a row (inside a wapper div)which all will have different content image, text other divs/classes etc. now one of these columns will be quite fluid as it will have different text on each page meaning it will be quite long on some pages not on others. the problem i am getting is in the good browsers firefox etc its ok in IE6+. the wapper does'nt seem to see the divs in the content meaning it does not get filled, meaning that the footer flys to the top and not where it should be, i dont have a live version but heres the code: mainly thanks Dan

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

</style>
</head>
<body>
<div id="wapper">
<div id="menu-pronuptia">
<p>test</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="menu-pronuptia1">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="menu-pronuptia2">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="menu-pronuptia3">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="box">
<p><br />
</div>
</body>
</html>

2 Column Layout - Problem With Right Column

Similar Tutorials

View Content

Hello!

I'm new to CSS, so any help would be greatly appreciated!

I'm working on this page:
sugarhooker[dot]com/testing/index2.html
*The CSS is included in the head

The right column is suppose to start where it says 'Are you hooked...'
It should be right underneath the navigation bar. Anyone know what I'm doing wrong?

Thanks in advance!

2 Column 1 Fluid, Content First

Similar Tutorials

View Content

I need to create a layout that is 100% width. 2 columns. The right column is 300px and and left column (content) takes up the rest. I need content to be first in the code because of float clearing.

Thanks for any help!

Fluid Three Column Problems

Similar Tutorials

View Content

I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions?

http://midnighttweaker.50megs.com/test.htm

Four Column Layout Problem

Similar Tutorials

View Content

Hi, I have a 4 column layout, all the columns have percentage widths at the moment but I want the 3rd column to be fixed width. I can't seem to figure out how I can have columns 1,2 and 4 fluid and fit the page, whilst having column 3 fixed width.
Code:

 ________________________________________________
|    expand     | expand  |   fixed  |   expand  |
|               |         |   width  |           |
|               |         |          |           |
|               |         |          |           |
|               |         |          |           |
|               |         |          |           |

atm i've created this by just using position:absolute; and then a % width and % from left side. For example the 2nd column atm is width:20%; left:40%; (because 1st column is 40% width)

I'm sure you can help, thx! (if I didn't explain too well, ask all questions )

3 Column Layout Problem

Similar Tutorials

View Content

I have a css site which is structured as following:

<head>
<body>

<div id="container">
<div id="header"></div>
<div id="navigation"></div>

<div id="leftmenu"></div>
<div id="rightmenu"></div>

<div id="content"></div>

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

</div>

</body>
</html>

#container{width:100%;height:100%;}

#header{height:105px;width:100%;}

#navigation {width:100%;}

#LeftMenu {
position: absolute;
width: 150px;
top: 145px;
left: 2px;
height: 553px;}

#RightMenu{
position: absolute;
width: 220px;
top: 145px;
right: 2px;
height: 553px;
}

#content{
margin: 20px 225px 5px 155px;
height: 550px;
}

My main problem is that when the left menu or right menu content increases it overflows the container and goes above footer. how can i make leftmenu, content and right menu when one is increasing all to increase together?

Cheers

Css 3 Column Layout - Ie6 Problem

Similar Tutorials

View Content

Hello

I would be really grateful if anyone can help me - I'm struggling with a 3 column layout using css.

It seems to work well in all except IE6 (I'm looking at it on a Mac using Safari and Firefox, I've got different browser screen shots from a website and all seem OK except IE6, which puts the center column under the other two, instead of at the same height.

If anyone has any ideas, they'd be much appreciated - I don't really know what I'm doing with css, and I have tried several different 3 col layouts that I've found on the web: this is the only one that has worked in almost all browsers for me.

This is the style sheet:

body {background: #003366; }
a { font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size: medium; color: #de8600;}
h1 { font-family: Verdana, Arial, sans-serif; font-size: x-large; font-weight: bold; background: #FFFFFF; color: #DE8600}
h2 { font-family: Verdana, Arial, sans-serif; font-size: large; font-weight: bold; color: #003366}
h3 { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; color: #003366}
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background: #003366; color: #DE8600}
h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background: #FFFFCC; color: #000033}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #003366;}
a:visited {font-family: Verdana, Arial, sans-serif; font-size: medium; color: #de8600;}
a:hover { font-family: Verdana, Arial, sans-serif; text-decoration:underline; font-size: medium; color: #DE8600;}

body {
padding: 0px;
border:0;
background: #003366;

}

div#wrapper {
width: 780px;
margin: 0 auto;

}

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px

}

#header .slogan {
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

div#navcontainer
{
background: #003366;
margin: 0px 0px 0px 0px;
padding: 1em 0 0 0;
font-size: 0.8em;
text-align: center
text-transform: lowercase;
border-top: 2px solid #de8600;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
display: inline;
width: 100%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 20%;
text-align: center
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #666666;
text-decoration: none;
background: #cccccc url(nav.gif);
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #cccccc url(nav.gif);
color: #996600;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #996600;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

#container
{
position: relative;
display:block;
background:#0ac;
border-left:200px solid #003366;
border-right:200px solid #003366;
}

#inner
{
display:block;
margin-left:-200px;
margin-right:-200px;
padding:5px;

}

#left
{
float:left;
position: relative;
width:200px;
left:0px;
}

#right
{
float:right;
position: relative;
width:200px;
right:0px;
}

#center
{
margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}

/* Just to extend each column */
#inner a:visited, a {text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}

.menu {
width:150px;
height:150px;
position:relative;
margin:0;
font-size:11px;
margin:0px 0;
z-index:100;

}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#003366; width:150px;
height:25px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#003366 url(nav.gif);
line-height:19px;
font-size:11px;
}

.menu ul {
padding:0;
margin:0;
list-style-type: none;
}

.menu ul li {
float:left;
margin-right:1px;
position:relative;
}

.menu ul li ul {
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#996600;
background:#cccccc;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:150px;
width:150px;
}

.menu ul li:hover ul li a.hide {
background:#ffffff;
color:#003366;
}

.menu ul li:hover ul li:hover a.hide {
width:150px;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#cccccc;
color:#996600;
width:200px;
}

.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#666666;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#003366;
}

.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#003366;
}

.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
}

div#fla {
position:relative;
text-align: center;
font-size: 10px;
margin: 20px 0 20px 0;
}

p.fla {
text-align: center;
font-size: 10px;
color: #ffffff;
margin: 0;
}

p.date {
text-align: right;
font-size: 0.8em;
color: #ffffff;
margin: 0;
}

div#guardian {
height:60px;
margin: 10px 0 10px 0;
align: right;
}

div#banner {
width:200px;
margin:20px 0 20px 0;
background:#ffffff;
padding:10;
color:#003366;
font-size:10px;
text-align: center;
border:1px solid #de8600;
}

#banner a:hover {
color:#996600;
font-size:10px;
text-align: center;
background:#cccccc;

}

p.banner {
color:#003366;
font-size:10px;
text-align: center;

}

div#google {
width:180px;
height:120px;
margin:10px 0 0 0;
background:#003366;
padding:5px;
color:#ffffff;
}

div#search {
width:180px;
margin:20px 0 20px 0;
background:#ffffff url("search.gif");
background-repeat: no-repeat;
padding:10px;
color:#003366;
border:1px solid #de8600;
}

p.search {
color:#003366;
font-size:11px;
text-align: center;

}

a.search {
color:#003366;
font-size:11px;
text-align: center;

}

#search a:hover {
color:#996600;
font-size:11px;
text-align: center;

}

div#edit {
width:250px;
margin:20px 0 0 0;
background:#ffffff url("edit-box.jpg");
background-repeat: no-repeat;
padding:20px;
color:#003366;
border:1px solid #de8600;
}

p.edit {
color:#003366;
font-size:11px;
text-align: center;

}

a.edit {
color:#003366;
font-size:11px;
text-align: left;

}

#edit a:hover {
color:#996600;
font-size:11px;
text-align: left;

}

.gallerycontent{
width: 250px;
border: 1px solid #de8600
background-color: #fffFFF;
text-align: center;
display: block;
}

div#footer {
clear:both;
position:relative;
align:center;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
width:780px;
height: 160px

}

p.footer {
color:#ffffff;
font-size:10px;
text-align: left;

}

I am apparently not allowed to post the URL of the page, but I hope that someone may be able to make some suggestions anyway.

Thanks for your time!

Frances

3-column Layout Problem In Win Ie

Similar Tutorials

View Content

I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help?

Here are my files:

http://www.artesiandesigngroup.com/westcoastpipe/grid.html
http://www.artesiandesigngroup.com/westcoastpipe/includes/main.css

Code:

body {
  font-family: Arial, Helvetica, sans-serif;
      background-color: #fff;
 text-align: center;
     margin: 0; padding: 0; }
/*** outside wrapper including fading background ***/
#container {
       position: relative;
     margin: auto;
   text-align: center;
     width: 840px;
   background: url(../images/layout/bg_page.gif) repeat-y center top; }

/*** actual container ***/
#pagesize {
       margin: auto;
   text-align: center;
     width: 800px;
   background-color: #9B9EA0;
      border: 1px solid #fff;
 border-bottom: none; }

/***  row 1 - top  ***/
#header {
  background-image: url(../images/layout/header.jpg);
     background-repeat: no-repeat;
   background-position: center top;
        margin: 0;
      padding: 0;
     width: 800px;
   height: 252px;
  border-bottom: 1px solid #fff; }
        
/***  Nav inside header  ***/
#topnav {
  position: relative;
     top: 150px;
     width: 800px;
   height: 102px;
  margin: 0;      padding: 0;
     background-color: #005195;
      color: #fff;
    font-size: .7em;
         }
#topnav ul {
  margin: 0; padding: 0; }
#topnav li {
    text-transform: uppercase;
      display: inline;
        list-style-type: none;
  margin: 0;      padding: 2px 4px;
       vertical-align: middle;
 border-right: 1px solid #fff; }

/***  row 2 - middle  ***/
#content {
     background: url(../images/layout/bg_content.gif) repeat-y center top;
   background:color: #fff;
 border: 1px solid #fff;
 border-bottom: none;
    margin: 30px 30px 0 30px;
       padding: 0;
     text-align: left; }

/***  column 1 - left  ***/
#sidebarphotos {
  float: left;
    margin: 0; padding: 0;
  width: 161px;
   font-size: .8em; }

/***  column 3 - right  ***/
#sidenav {
        margin: 0; padding: 0;
  float: right;
   width: 170px;
   background-color: #555;
 font-size: .8em;
        color: #ddd; }

/***  column 2 - center  ***/
#textarea {
  width: 395px;
   margin: 0; padding: 0;
  margin-right: 170px;
    margin-left: 169px;
     background-color: #fff;
 font-size: .9em;
        vertical-align: top; }

/***  header for textarea  ***/
#contentheader {
   margin: 0;
      padding: 4px 8px;
       vertical-align: middle;
 background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
  font-size: 1em;
 font-style: normal;
     font-weight: normal;
    text-transform: uppercase;
      color: #005195;
 line-height: 1em;
       border-bottom: 1px solid #555;
}

/***  row 3 - bottom  ***/
#footer {
      width: 800px;
   margin: 0;
      padding: 2px 0;
 background-color: #005195;
      font-size: .6em;
        color: #fff;
    border-top: 1px solid #fff;
     border-bottom: none;
    letter-spacing: .1em;
}

Thanks in advance!

2 Column Layout Problem!

Similar Tutorials

View Content

i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this.
div#column1 {
margin-left: 150px;
width: 70px;
height: 500px;
background: #CCCCFF;
color: blue;}

div#column2 {
margin-left: 250px;
color: black;
background: blue;

}

2 Column Layout Problem

Similar Tutorials

View Content

I have a two column, three row layout for my website. I'm having
problems where my left column is longer than the middle "main" content,
and when that happends it overlaps my footer instead of pushing it
down.

Would someone mind looking at my html/css and tell me how I can fix
this issue?

Link: http://mividdesigns.com/csshelp.html

By the way, it works/looks fine in FF, but I have problems in IE.

Thank You!

2 Column Layout Problem

Similar Tutorials

View Content

I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck.

Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great.

link

Thanks,

Brad

2 Column Layout Problem

Similar Tutorials

View Content

[/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column.

Here is an example:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xyzTrader.com</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
</head>
<body id="type-b"><!---->

<div id="wrap">

	<div id="header">

		<div id="site-name">xyzTrader.com</div>
		<div id="search">
			<form action="">
			<label for="searchsite">Site Search:</label>
			<input id="searchsite" name="searchsite" type="text" />
			<input type="submit" value="Go" class="f-submit" />
			</form>
		</div>
	</div>

	<div id="content-wrap">
		<div id="login">
					<form method="post" action="/test/header.php">
		  Username <br />
		  <input name="uname" type="text" id="uname">
		  <br />
		  Password<br />
		  <input name="pword" type="password" id="pword">
		  <br />
		  <input name="Login" type="submit" id="Login" value="Login">
		</form>
				</div>

		<div id="utility">

		<ul id="nav-secondary">
		<li class="first"><b>Catagories</b></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>


		</div>

		<div id="content">
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		<p>hello<br>sfafssf</P>

and here is the css file:
Code:

/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer} 
a:link {color:#c00} 
a:visited {color:#999} 
a:hover,a:active {color:#069} 

/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
	

/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}

/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
	ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}

dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}

/* GENERAL */
img {border:none} 
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px} 

/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}

	#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
	
	/* SEARCH */
	#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
	#search form {margin:0}
	#search input {width:8em;margin: 0 0 -1px;height:1.2em}
	#search label {padding:5px 0 0;display:inline}
	#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}

/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
	#login   {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
	#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
	#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}

#content {margin: 0 50px}
	#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
	#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
	#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}

/* LAYOUT TYPE B */
	#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
	#type-b #content {margin: 0 23px 0 235px}

/* SECONDARY NAVIGATION - vertical navigation */
	#nav-secondary, #nav-secondary ul {position:static}
	#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
	#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
	#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
	#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
	#nav-secondary a:link {color:#000} 
	#nav-secondary a:visited {color:#000} 
	#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
	#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
	#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

/* SECONDARY NAVIGATION - 2nd TIER */
	#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
	#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
	#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
	#nav-secondary li.active li {border: none;margin:0}
	
	#nav-secondary li.active li.active a:link, 
	#nav-secondary li.active li.active a:visited, 
	#nav-secondary li.active li.active a:hover, 
	#nav-secondary li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 3rd TIER */
	#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
	#nav-secondary li.active li.active li a:link, 
	#nav-secondary li.active li.active li a:visited, 
	#nav-secondary li.active li.active li a:hover, 
	#nav-secondary li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 4th TIER */
	#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
	#nav-secondary li.active li.active li.active li a:link, 
	#nav-secondary li.active li.active li.active li a:visited, 
	#nav-secondary li.active li.active li.active li a:hover, 
	#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}

/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
	#footer p {margin:0}
	#footer a:link {color:#999}

Can anyone give me some advice or what to do to make this line go the length of the page??

Thanks in advance,
Mike

Problem With Border On Three Column Layout

Similar Tutorials

View Content

I'm working on a new design for my blog and having a problem with a border. I have a three column layout and want to have a border on the left, right, and bottom the container div, but instead of surrounding it it just sticks it at the top by itself.

Heres the page and css
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" />

<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,bold' rel='stylesheet' type='text/css' />

<link href="style.css" rel="stylesheet" type="text/css"/>
<title>3 Column Liquid Fixed Fixed CSS Layout</title>

</head>
<body>
<div class="wrapper3">
    <div class="header3">
        <img src="logo.png" alt="SuperSonicMoose" />
        <div id="line1"></div><div id="line2"></div>
    </div>
    <div class="wrapleft3">
        <div class="left3">
        <div class="article">
            <h1>Article Title</h1><h2>Posted on Friday, March 11th, 2011</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Read More >></a></p>


        </div></div>
    </div>
    <div class="middle3"><div class="article">
            middle fixed
    </div> </div>
    <div class="right3"><div class="article">
            right fixed
    </div> </div>
    <div class="footer3">
        footer
    </div>
</div>
</body>
</html>

Code:

.wrapper3{
   width: 93%;
   min-height: 100%;
   margin: 0 auto;
   border:4px solid #333333;
   
}
.header3{
   background-image: url(headbg.png);
   float: left;
   width: 100%;
   background-color: white;
}
.wrapleft3{
   float: left;
   width: 100%;
   background-color: #ffffff;
}
.left3{
   margin-right:410px;
   background-color: #ffffff;
   min-height: 200px;
   border-right:#E9F6FC solid 2px;
}
.middle3{
   float: left;
   width: 265px;
   margin-left: -406px;
   background-color: #ffffff;
   min-height: 200px;
   
}
.right3{
   float: right;
   width: 135px;
   margin-left: -137px;
   background-color: #ffffff;
   min-height: 200px;
   border-left:#E9F6FC solid 2px;
}
.footer3{
   float: left;
   width: 100%;
   background-color: #ffffff;
}
body {
   background-image: url(pgbg.png);
   padding: 0px;
   margin: 0px;
   background-color: #8CD4F1;
font-family: 'PT Serif', arial, serif; 
}
#line1 {border-bottom-style: solid; border-bottom-color: #8CD4F1; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:99%; margin: auto;}
#line2 {border-bottom-style: solid; border-bottom-color: #E9F6FC; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:98%; margin: auto;}

.left3 h1 {
margin: 0;padding: 0;
	color: #4A7280;
	font-size: 20px;
	border: 0px;
	border-bottom: 1px solid #E9F6FC;
	width:70%;

}
.left3 h2 {font-size: 11px; color: #666666;margin: 0;padding: 0;
}
.left3 p {font-size: 12px; color: #5F5F5F;}
.article {padding:10px;}
a { text-decoration: none; color: #B83352; }

I'm sure its something stupid but I haven't been able to figure it out all day.

Clear:both Problem In 3 Column Layout

Similar Tutorials

View Content

I have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs.

wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/

and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/

As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both

Any suggestions will be appreciated as I've exhausted my skills on this one.

Skinned Site With 1 Column Fluid Height

Similar Tutorials

View Content

Hi, noob here,

I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer.

My layout idea is fairly basic. Fixed width-fluid height.

One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin.

What I need to figure out is how to allow the skin's graphics, with its block element body to vertically expand or contract, depending upon the user's resolution.

I have considered using % values, but I don't know how to apply them to the skin's graphics properly.

jbonham