4 replies [Last post]
cre8tiveman
cre8tiveman's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+11
Joined: 2010-02-20
Posts: 1
Points: 2

Howdy all,

I've got probably the worlds simplest problem but I can't seem to figure out where I'm going wrong.

I have a 3 column layout that is centered on the page, however if I don't make the outer div container width larger than the combined total of the inner div's then it seems to wrap around and makes a blank space under my inner div tags.

For example

Outer DIV
|--------------------------------------------------|
|Inner Div 1| Inner Div2 |Inner Div 3|
|(extra white space that isn't wanted! |
|--------------------------------------------------|

Here's my HTML code.

<html xmlns="http://www.w3.org/1999/xhtml" >
 
    <head id="Head1" runat="server">
        <title>Untitled</title>
        <link href="positioning.css"    rel="stylesheet" type="text/css" />
        <link href="screen.css"         rel="stylesheet" type="text/css" />
    </head>
 
    <body>
 
        <form id="form1" runat="server" class="form">
 
            <div class="Container_StyleB SP840">
 
                <div class="Column SP17 BorderLT"></div>
 
                <div class="Column SP800">
 
                </div>
 
                <div class="Column SP17 BorderRT"></div>
 
            </div>
 
        </form>
 
    </body>
</html>

And Here's the CSS

body, html
    {   background-image:   url('images/BkgndGradientFill.png');
        background-repeat:  repeat-x;
        background-color:   #ffffff;
	margin:             0px 0px 0px 0px;
	padding:            0px 0px 0px 0px;
	min-width:          840px;
	overflow:           hidden;}
 
.form
    {   margin:             0px 0px 0px 0px;
	padding:            0px 0px 0px 0px;
	overflow:           hidden;}
 
.Container_StyleB  
    {   height:             100%;
        margin:             0px auto;
        padding:            0px 0px 0px 0px;
        overflow:           hidden;
        width:              840px;  }
 
.Column
    {   float:              left;
        height:             100%;
        margin:             0px 0px 0px 0px;
        padding:            0px 0px 0px 0px;
        overflow:           hidden;}

Am I missing something completely obvious? Any help would be fantastic. Thanks in advance.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Show a link or the rendered

Show a link or the rendered html.

Raw ASP.NET doesn't do much for those without Visual Studio or those with that are too lazy to get it working. Tongue

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 44 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Where is your doctype?

Where is your doctype?

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Deuce wrote: Where is your

Deuce wrote:

Where is your doctype?

Good question. I had assumed it was there as it is placed there by default using Visual Studio.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You haven't given your

You haven't given your floated columns a width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference