11 replies [Last post]
XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

Hello,

I would like to create page with 5 DIVs, header-footer, left-right and center. But the problem is that I've created total mess and now I register here hoping that you can help me out.

Here's link to files (html&css)
http://www.2shared.com/file/QWPjfYaH/source.html

The problem I've created is that widgets were overlaying and they were all on left side,except one... couldn't make it to work so I've uploaded the original code, that already has 4 DIVS but left-right and center are all 33.3%, when I created new class for right and left the mess started Puzzled

left and right DIVs should be 20%, center DIV 60%.

Regards,
XoX

XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

Anyone?

Anyone?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you want to paste code

If you want to paste code please use a recognized utility such as pastebin, I don't know who 2shared.com is and not about to download zip files from them.

Better yet would be if you had that test code running on a server we could access; failing that paste the code directly to your forum post for us to view ( using [ code ] tags please )

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

Oh OK no problem. Here's

Oh OK no problem.

Here's CSS

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */
 
body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #000;}
a {color:white;}
 
/* Colors */
.color-yellow {background:#f2bc00;}
.color-red    {background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,
.color-white h3,
.color-green h3
	{color:#000;}
.color-red h3,
.color-blue h3,
.color-orange h3
	{color:#FFF;}
/* End Colors */
 
/* Head section */
#head {
    background: #000 url(img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    background: url(img/inettuts.png) no-repeat center;
    text-indent: -9999em
}
/* End Head Section */
 
/* Columns section */
#columnLeft .column {
    float: left;
    width: 25%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}
 
/* Column dividers (background-images) : */
	#columnLeft #column1 { background: url(img/column-bg-left.png) no-repeat right top; }
	#columnRight #column3 { background: url(img/column-bg-right.png) no-repeat left top; }
 
#columns #column1 .widget { margin: 30px 35px 0 25px; }
#columns #column3 .widget { margin: 30px 25px 0 35px; }
#columnLeft .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columnleft .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columnLeft .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columnLeft .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 0 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columnLeft .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columnLeft .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid #FFF;
}
#columnLeft .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columnLeft .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columnLeft .widget .widget-content ul li {padding: 3px 0;}
#columnLeft .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columnLeft .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#columnLeft .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}
/* End Columns section */
/* Column CENTER section */
#columnCenter .column {
    float: center;
    width: 50%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}
 
#columnCenter .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columnCenter .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columnCenter .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columnCenter .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 0 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columnCenter .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columnCenter .widget .widget-content img {
    float: center;
    margin: 10px;
    border: 1px solid #FFF;
}
#columnCenter .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columnCenter .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columnCenter .widget .widget-content ul li {padding: 3px 0;}
#columnCenter .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columnLeft .widget .widget-content ul.images li {
    display: inline;
    float: center;
}
#columnLeft .widget .widget-content ul.images img {
    display: inline;
    float: center;
    margin: 0 0 7px 7px;
}
/* End Columns section */
/* Column RIGHT section */
#columnRight .column {
    float: right;
    width: 25%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}
 
#columnRight .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columnRight .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columnRight .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columnRight .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 0 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columnRight .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columnRight .widget .widget-content img {
    float: center;
    margin: 10px;
    border: 1px solid #FFF;
}
#columnRight .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columnRight .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columnRight .widget .widget-content ul li {padding: 3px 0;}
#columnRight .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columnRight .widget .widget-content ul.images li {
    display: inline;
    float: center;
}
#columnRight .widget .widget-content ul.images img {
    display: inline;
    float: center;
    margin: 0 0 7px 7px;
}
/* End Columns section */

And here is HTML

<!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" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>welcome!</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
        <link href="inettuts.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript">
        $('<style type="text/css">.column{visibility:hidden;}</style>').appendTo('head');
        $('body').css({background: '#000 url(img/load.gif) no-repeat center'})
    </script>
 
    <div id="head">
        <h1>Nice Day</h1>
    </div>
 
    <div id="columnLeft">
 
        <ul id="column1" class="column">
            <li class="widget color-green" id="intro">
                <div class="widget-head">
                    <h3>Widget 1 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-red" id="widget2">  
                <div class="widget-head">
                    <h3>Widget 2 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>
	</div>
	<div id="columnCenter">
        <ul id="column2" class="column">
            <li class="widget color-blue" id="widget3">  
                <div class="widget-head">
                    <h3>Widget 3 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-yellow" id="widget4">  
                <div class="widget-head">
                    <h3>Widget 4 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>
     </div>
<div id="columnRight">	 
        <ul id="column3" class="column">
            <li class="widget color-orange" id="widget5">  
                <div class="widget-head">
                    <h3>Widget 5 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-white" id="widget6">  
                <div class="widget-head">
                    <h3>Widget 6 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
 
        </ul>
 
    </div>
 
    <script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
    <script type="text/javascript" src="cookie.jquery.js"></script>
    <script type="text/javascript" src="inettuts.js"></script>
 
</body>
</html>

Here's link to demo preview as you can see there are already three columns, I would like to have this three in different size like 20%-60%-20% and off course footer. I'm testing on localhost and router doesn't allow incoming traffic so all I can is give you link to the demo site.
http://james.padolsey.com/demo/tut-inettuts-with-cookies/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You should be able to

You should be able to override the .column widths by using the ids on each of those three columns i.e

#column #column1 {width:;}

will override .column {width:33.3%;} due to the id carrying a heavier weight than a class.

So no need to create new classes or ids you should be able to work with what's there.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

Ok I've changed that, how do

Ok I've changed that, how do I make center div to align between the sides two?

Here's the new code (CSS), I haven't touched HTML.

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */
 
body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #000;}
a {color:white;}
 
/* Colors */
.color-yellow {background:#f2bc00;}
.color-red    {background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,
.color-white h3,
.color-green h3
	{color:#000;}
.color-red h3,
.color-blue h3,
.color-orange h3
	{color:#FFF;}
/* End Colors */
 
/* Head section */
#head {
    background: #000 url(img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    background: url(img/inettuts.png) no-repeat center;
    text-indent: -9999em
}
/* End Head Section */
 
/* Columns section */
#column #column1 {
    float: left;
    width: 20%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}
#column #column2 {
float: center; /*<-- HERE'S THE PROBLEM (I know float: center; is not right)*/
    width: 60%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
		}
#column #column3 {
float: right;
    width: 20%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
		}
/* Column dividers (background-images) : */
	#columns #column1 { background: url(img/column-bg-left.png) no-repeat right top; }
	#columns #column3 { background: url(img/column-bg-right.png) no-repeat left top; }
 
#columns #column1 .widget { margin: 30px 35px 0 25px; }
#columns #column3 .widget { margin: 30px 25px 0 35px; }
#columns .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columns .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columns .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columns .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 0 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columns .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columns .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid #FFF;
}
#columns .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columns .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columns .widget .widget-content ul li {padding: 3px 0;}
#columns .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columns .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#columns .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}
/* End Columns section */

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

have you not tried using

have you not tried using margins to space the columns out? Often referred to as 'Gutters' by these grid layouts, failing that place columns 1 & 3 before column 2 float 1 & 3 left & right then give column 2 margins instead of width to push it's edges away from the outside columns.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

Yes I did, here's new CSS and

Yes I did, here's new CSS and screenshot of result is attached (PNG image)

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */
 
body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #000;}
a {color:white;}
 
/* Colors */
.color-yellow {background:#f2bc00;}
.color-red    {background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,
.color-white h3,
.color-green h3
	{color:#000;}
.color-red h3,
.color-blue h3,
.color-orange h3
	{color:#FFF;}
/* End Colors */
 
/* Head section */
#head {
    background: #000 url(img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    background: url(img/inettuts.png) no-repeat center;
    text-indent: -9999em
}
/* End Head Section */
 
/* Columns section */
#column #column1 {
    float: left;
    width: 20%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}
#column #column2 {
margin-left:40%;
margin-right:40%;
    width: 30%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
		}
#column #column3 {
float: right;
    width: 20%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
		}
/* Column dividers (background-images) : */
	#columns #column1 { background: url(img/column-bg-left.png) no-repeat right top; }
	#columns #column3 { background: url(img/column-bg-right.png) no-repeat left top; }
 
#columns #column1 .widget { margin: 30px 35px 0 25px; }
#columns #column3 .widget { margin: 30px 25px 0 35px; }
#columns .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columns .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columns .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columns .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 0 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columns .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columns .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid #FFF;
}
#columns .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columns .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columns .widget .widget-content ul li {padding: 3px 0;}
#columns .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columns .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#columns .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}
/* End Columns section */

AttachmentSize
Issue.PNG 55.06 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You might need to think a bit

You might need to think a bit harder about those percentage values on column 2 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

Ok, solved the major issue,

Ok, solved the major issue, it's now aligned ok. The problem that I now have is that right div is aligned to bottom.

Here's new CSS

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */
 
body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #000;}
a {color:white;}
 
/* Colors */
.color-yellow {background:#f2bc00;}
.color-red    {background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,
.color-white h3,
.color-green h3
	{color:#000;}
.color-red h3,
.color-blue h3,
.color-orange h3
	{color:#FFF;}
/* End Colors */
 
/* Head section */
#head {
    background: #000 url(img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    background: url(img/inettuts.png) no-repeat center;
    text-indent: -9999em
}
/* End Head Section */
 
/* Columns section */
#columns #column1 {
    float: left;
    width: 20%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}
#columns #column2 {
margin-left:19%;
margin-right:19%;
    width: 60%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
		}
#columns #column3 {
float: right;
    width: 20%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
		}
/* Column dividers (background-images) : */
	#columns #column1 { background: url(img/column-bg-left.png) no-repeat right top; }
	#columns #column3 { background: url(img/column-bg-right.png) no-repeat left top; }
 
#columns #column1 .widget { margin: 30px 35px 0 25px; }
#columns #column3 .widget { margin: 30px 25px 0 35px; }
#columns .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columns .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columns .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columns .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 0 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columns .widget .widget-content p {
    padding: 0.8em 0;
    border-bottom: 1px solid #666;
}
#columns .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid #FFF;
}
#columns .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columns .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columns .widget .widget-content ul li {padding: 3px 0;}
#columns .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columns .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#columns .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}
/* End Columns section */

And screenshot

Uploaded with ImageShack.us

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What's your markup look like?

What's your markup look like? and how it stack up if you remove the width from the column2 element?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

XoX
XoX's picture
Offline
newbie
Germany
Last seen: 11 years 32 weeks ago
Germany
Timezone: GMT+1
Joined: 2011-02-15
Posts: 7
Points: 8

If I remove width from

If I remove width from column2 nothing changes.

here's html

    <div id="columns">
 
        <ul id="column1" class="column">
            <li class="widget color-green" id="intro">
                <div class="widget-head">
                    <h3>Widget 1 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-red" id="widget2">  
                <div class="widget-head">
                    <h3>Widget 2 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>
 
        <ul id="column2" class="column">
            <li class="widget color-blue" id="widget3">  
                <div class="widget-head">
                    <h3>Widget 3 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-yellow" id="widget4">  
                <div class="widget-head">
                    <h3>Widget 4 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
        </ul>
 
        <ul id="column3" class="column">
            <li class="widget color-orange" id="widget5">  
                <div class="widget-head">
                    <h3>Widget 5 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
            <li class="widget color-white" id="widget6">  
                <div class="widget-head">
                    <h3>Widget 6 title</h3>
                </div>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
 
        </ul>
 
    </div>