Css Layout Help - need help with my layout

awesomebill61

Feb 16 2008, 06:14 AM

http://billy61.trap17.com/divs/modulemaker.php

i am rewriting my layout in divs instead of tables.

the problem i have, is i need the divs with the "L" and "R" in them to extend all the way down to the bottom of the "content" div.

also, what do i need to do to center the entire thing on the webpage?

and it appears as though the top center div extends down into the middle div by like... maybe 5 px... is this just an illusion or is it really happening?

this is the source html for the page:

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" xml:lang="en" lang="en">
<head>
<title>Div Practice</title>
<style type="text/css">
.wrapper{margin: 0px; padding: 0px; clear: left;}
.topLeftCorner{margin: 0px; padding: 0px; float: left; height: 100px; clear: left; background-color: #000000;}
.topCenterBanner{margin: 0px; padding: 0px; float: left; height: 100px; background-color:#0000FF;}
.topRightCorner{margin: 0px; padding: 0px; float: left; height: 100px; clear: right; background-color: #000000;}
.sideLeft{margin: 0px; padding: 0px; float: left; height: 100%; clear: left; background-color: #666666;}
.mainCenterContent{margin: 0px; padding: 8px; float: left; height: 100%; background-color: #000099;}
.sideRight{margin: 0px; padding: 0px; float: left; height: 100%; clear: right; background-color: #666666;}
.bottomLeftCorner{margin: 0px; padding: 0px; float: left; height: 50px; clear: left; background-color: #CCCCCC;}
.bottomCenter{margin: 0px; padding: 0px; float: left; height: 50px; background-color: #000033;}
.bottomRightCorner{margin: 0px; padding: 0px; float: left; height: 50px; clear: right; background-color: #CCCCCC;}
</style>
</head>
<body>
<div style="width: 800px;" class="wrapper">
     <div style="width: 800px;" class="wrapper">
          <div style="width: 50px;" class="topLeftCorner"></div>
          <div style="width: 700px;" class="topCenterBanner"></div>
          <div style="width: 50px;" class="topRightCorner"></div>
     </div>
     <div style="width: 800px;" class="wrapper">
         <div style="width: 50px" class="sideLeft">L</div>
         <div style="width: 684px;" class="mainCenterContent">Content<br/><br/><br/></div>
         <div style="width: 50px;" class="sideRight">R</div>
     </div>
     <div style="width: 800px;" class="wrapper">
         <div style="width: 50px;" class="bottomLeftCorner"></div>
         <div style="width: 700px;" class="bottomCenter"></div>
         <div style="width: 50px;" class="bottomRightCorner"></div>
     </div>
</div>
</body>
</html>

sonesay

Feb 16 2008, 06:41 AM

Ok I may be not 100% correct on this one but I've see articles about this and if I can remember correctly blah I should I just worked on something similar just now.

the div will only expand down to how much content you have hence why your middle content has some <br /> in it so its got some and expands.

the only way to get a similar effect is to use a image for that divs background and tile it vertically. so before get into doing that decide what is actually going to be in there. because if the sides are going to be a tiling image or color making changes later on can be difficult.

heres my example I am currently working on. http://sonesay.trap17.com/sonesayi_v2

I am tiling the empty side divs with an image. making changes later on would be hard.
if you have any more questions just reply here I'll be here working on my layout all night.

anachro

Feb 16 2008, 06:41 AM

For sideLeft & sideRight you just have to put content in them (this happens sometimes) when you fill the space inside with text/images/ w/e it will go down. otherwise you'll have to go much more restrictive, by setting an exact height for both sides, and the content, and just set content to

CODE

.mainCenterContent{margin: 0px; padding: 8px; float: left; height: AMOUNT DETERMINED; overflow: auto; background-color: #000099;}

to center it, just make the

CODE

code at the top of the first div, between the body and the div tags, and have the end cap after the last </div> but before the end body, and that will center you content

jlhaslip

Feb 16 2008, 09:09 AM

To centre the entire html layout, change the outer wrapper from being a class to being an id. Then add the css for the id=wrapper as below.
The html for the outer div is easy to change into a div by simply replacing the class= with an id= and then the hash mark (#) says to handle it according to the rules for the id = wrapper.

CODE

The suggestion to use align is not a Standards Compliance approach, although IE6 will require you to follow the margin settings with a text-align rule, because IE6 messes the margins up terribly, so the complete set of attributes for the outer wrapper becomes:

CODE

#wrapper {
clear:left;
margin:0 auto;
text-align: center;
padding:0px;
width: 800px;
}

That will handle the centering nicely.

To draw the middle down, simply Google "faux columns" (no quotes). That is a proven technique to 'extend' columns. Might work for this application, not certain. It requires that you set a repeating background-colour for the wrapper div with the id to the colour for the middle side columns. The area which is not extending then shows the correct colour.

One thing I noticed, too, is that the centre middle div has some padding-top which the side middle div's do not have. Either drop the padding-top from the middle section, or add it to the middle outer div's so they will then all be the same height.

Hope this helps.

*edit*

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <!-- Source is http://billy61.trap17.com/divs/modulemaker.php -->
    <head>
        <title>
            Div Practice
        </title>
        <style type="text/css">
/*<![CDATA[*/
        html, body { margin: 0; padding: 0; height: 100%; background-color: #ececec; }
        #wrapper{margin: 0 auto; width: 800px;  }
        .topLeftCorner {margin: 0px; padding: 0px; float: left; height: 100px;  background-color: #ff0000;}
        .topCenterBanner {margin: 0px; padding: 0px; float: left; height: 100px; background-color:#0000FF;}
        .topRightCorner{margin: 0px; padding: 0px; float: right; height: 100px;  background-color: #000000;}
        .sideLeft{margin: 0px; padding: 0px; float: left; height: 100%;  background-color: #666666;}
        .mainCenterContent{margin: 0px; padding: 0px; float: left; height: 100%; background-color: #000099;}
        .sideRight{margin: 0px; padding: 0px; float: right; height: 100%;  background-color: #666666;}
        .bottomLeftCorner{margin: 0px; padding: 0px; float: left; height: 50px; clear:both; background-color: #CCCCCC;}
        .bottomCenter{margin: 0px; padding: 0px; float: left; height: 50px; background-color: #000033;}
        .bottomRightCorner{margin: 0px; padding: 0px; float: right; height: 50px;  background-color: #CCCCCC;}
        #footer { height: 50px; clear:both; }
        .left { width: 50px; }
        .right { width: 50px; }
        .middle { width: 700px; }


        /*]]>*/
        </style>
    </head>
    <body>
        <div id="wrapper">

            <div style="width: 800px;" class="wrapper">
                <div style="width: 50px;" class="topLeftCorner"></div>
                <div style="width: 700px;" class="topCenterBanner"></div>
                <div style="width: 50px;" class="topRightCorner"></div>
            </div>
            <div style="width: 800px;">
                <div style="width: 50px" class="sideLeft">
                    L<br />

                    <br />
                    <br />
                    <br />
                </div>
                <div style="width: 700px;" class="mainCenterContent">
                    Content<br />
                    <br />
                    <br />

                    <br />
                </div>
                <div style="width: 50px;" class="sideRight">
                    R<br />
                    <br />
                    <br />
                    <br />
                </div>

            </div>
            <div>
                <div style="width: 50px;" class="bottomLeftCorner"></div>
                <div style="width: 700px;" class="bottomCenter"></div>
                <div style="width: 50px;" class="bottomRightCorner"></div>
            </div>
        </div>
    </body>
</html>

Validates as xhtml strict at the w3c Validator. Still could be tidied up a bit.

Checked in FF2, IE7, Safari on windows, Opera 9.25 and they are all good. IE6 that I have installed is not dependable for analysis. You will need to get that checked by someone else.

awesomebill61

Feb 17 2008, 10:38 PM

okay, first i'll give a little more background info on what i'm coding....
this piece of code here is being written to be reused as content boxes all throughout my website....
http://billy61.trap17.com/sitedev/
that gives an idea of what i'm trying to do (it's all done in nested tables however)

so, jihaslip, i'll add that bit about centering the content to the container div that establishes the header and left and right column... when i code that up.... and i read about the align=center thing not being standards compliant for divs.

now, i googled faux columns, read some articles on it.... seems like a simple concept.

i coded this up:
http://billy61.trap17.com/divs/

the faux columns works in IE7 and Opera, but not in FF2.... any ideas for how to make it work?

heres the css:

CODE

.wrapper{margin: 0px; padding: 0px; clear: both;}
.topLeftCorner{margin: 0px; padding: 0px; height: 100px; float: left; background-image: url(theme/black_frost/index_r2_c2.jpg); background-position: 0px, 0px; background-repeat: no-repeat; clear: left;}
.topCenterBanner{margin: 0px; padding: 0px; height: 100px; float: left; background-image: url(theme/black_frost/index_r2_c3.jpg); background-position: 0px, 0px; background-repeat: repeat-x;}
.topRightCorner{margin: 0px; padding: 0px; height: 100px; float: left; background-image: url(theme/black_frost/index_r2_c4.jpg); background-position: 0px, 0px; background-repeat: no-repeat; clear: right;}
.sideLeft{margin: 0px; padding: 0px; height: 75px; float: left; background-image: url(theme/black_frost/index_r3_c2.jpg); background-position: 0px, 0px; background-repeat: no-repeat; clear: left;}
.mainCenterContent{margin: 0px; padding: 0px; float: left; background-color: #FFFFFF;}
.sideRight{margin: 0px; padding: 0px; height: 75px; float: left; background-image: url(theme/black_frost/index_r3_c4.jpg); background-position: 0px, 0px; background-repeat: no-repeat; clear: right;}
.bottomLeftCorner{margin: 0px; padding: 0px; height: 50px; float: left; background-image: url(theme/black_frost/index_r5_c2.jpg); background-position: 0px, 0px; background-repeat: no-repeat; clear: left;}
.bottomCenter{margin: 0px; padding: 0px; height: 50px; float: left; background-image: url(theme/black_frost/index_r5_c3.jpg); background-position: 0px, 0px; background-repeat: repeat-x;}
.bottomRightCorner{margin: 0px; padding: 0px; height: 50px; float: left; background-image: url(theme/black_frost/index_r5_c4.jpg); background-position: 0px, 0px; background-repeat: no-repeat; clear: right;}

and the html:

CODE

<div style="width: 400px;" class="wrapper">
     <div style="width: 400px;" class="wrapper">
         <div style="width: 50px;" class="topLeftCorner"><img src="theme/black_frost/index_r2_c2.jpg" /></div>
         <div style="width: 300px;" class="topCenterBanner"><img src="theme/black_frost/index_r2_c3.jpg" /></div>
         <div style="width: 50px;" class="topRightCorner"><img src="theme/black_frost/index_r2_c4.jpg" /></div>
     </div>
     <div style="width: 400px; background-image: url(image.php?type=bg&dir=theme/black_frost&width=400); background-repeat: repeat-y; background-position: 0px, 0px;" class="wrapper">
         <div style="width: 50px;" class="sideLeft"><img src="theme/black_frost/index_r3_c2.jpg" /></div>
         <div style="width: 300px;" class="mainCenterContent"><p>Hello World<br/><br/><br/><br/><br/><br/><br/></p></div>
         <div style="width: 50px;" class="sideRight"><img src="theme/black_frost/index_r3_c4.jpg" /></div>
     </div>
     <div style="width: 400px;" class="wrapper">
         <div style="width: 50px;" class="bottomLeftCorner"><img src="theme/black_frost/index_r5_c2.jpg" /></div>
         <div style="width: 300px;" class="bottomCenter"><img src="theme/black_frost/index_r5_c3.jpg" /></div>
         <div style="width: 50px;" class="bottomRightCorner"><img src="theme/black_frost/index_r5_c4.jpg" /></div>
     </div>
</div>

a couple last notes:
the entire page is generated out of php, it is meant to be that a content box can be created of any size. it is because of this varying size that the width of the div is defined in the div rather than in the stylesheet. this is also why the background for the faux columns is defined in the div, and why the image is a php file- in order for the background image to be the right width, it has to be created at runtime.

sonesay

Feb 17 2008, 11:35 PM

My original link seemed ok but when I added content to it it expanded past the footer so I had fix that.

new one is at http://sonesay.trap17.com/si

I had a look at your code and saw your using images inside the divs

eg <div class='wrapper'> <img .../> </div> you should just be able to apply the backgound to the div class

also I had to create use different class or id for each row since their height was going to be different.

that fixed my expanding problem similar to what you have. I was able to set a different height to each row because they were different.

for example
<div id='top'
<div id='content_row'
<div id='footer'

content_row is expandable so I gave it height 100%, just to make sure. I'll try get a working example from your layout now, its good practice anyway as with my one I think I may of fluked it so I'll update. I just wanted to provide what I did so you can maybe have a good as well instead of waiting.

update*

This is how I would do it http://sonesay.trap17.com/examples/expandable_divs/billy

The side images you are using don't tile well... I had a similar problem before and just went for basic plain texture that tiled.

Hope that helps.

awesomebill61

Feb 18 2008, 06:30 AM

http://billy61.trap17.com/divs/
i ended up rewriting the css using sonesay's page as a guide.
works in IE7 IE6, FF2, and Opera 9.25.
safari won't work with vista x64 (or at least not for me) so if someone is running that and wants to check it for me that'd be awesome.

i still need to work out a few little things here and there so it will validate as strict

thanks to everyone for their help.... i am absolutely jumping for joy now because i got this to work.

sonesay

Feb 18 2008, 06:39 AM

Hey you got that tiling side image to work. I never thought of using a background image for the div with the combination of an image in there to get that effect. Nice job

. I think I will steal this idea for my future designs.

I just checked under safari and it works fine.

jlhaslip

Feb 20 2008, 06:03 AM

Very nice, indeed...

Here is another method that you might want to see. I couldn't find my sample on this box before tonight, or I would have proposed it earlier.

http://www.schillmania.com/projects/dialog/

They show a gif version and a png version. You may be able to find an IE javascript solution for the png on IE <6.

Simply stated, there are two div's contained within a wrapper div, side by side.
The Wrapper is sized as a percentage of the window.
The left hand 'classed' div is full width of the wrapper with a margin right set to the width of the right hand side div.
The right hand div has a negative margin to snuggle up to the left hand image.
The images are set to the background, so the content sits on the main layer of the page, also contained by the wrapper.
Since the wrapper is a percentage, you can cover the entire window with a single "set", or position several smaller ones side by side, like the opening layout.
Stack 3 of these div's, one for the header of the image set, one for the body and one for the footer of each "image set. Throw some content into the center div, and there you go.

Also, because they are all "classed", you can have several of these on a single page without a multitude of named div's and the complexity that causes.

Sample of the CSS for the header set of div's :

CODE

.dialog .hd {
background:transparent url(tl.png) no-repeat 0px 0px;
margin-right:14px; /* space for right corner */
}

.dialog .hd .c {
background:transparent url(tr.png) no-repeat right 0px;
margin-right:-14px; /* pull right corner back over "empty" space (from above margin) */
}

Sample of the html for the same set of div's :

CODE

There is more to it than that, of course. Go see that link and do a view source for the full information on that technique.
The author provides a zip for download as well.

I played with it a little, and have a sample with one block floated left, another floated right, text in the middle.

http://www.jlhaslip.trap17.com/samples/round/index.html

Hope this helps.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE