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.

Similar Topics

Keywords : css layout layout

Css Layout Generator - *free* - Generate a CSS layout for your site (3)
pretty powerful css layout generator. /smile.gif' border='0' style='vertical-align:middle'
alt='smile.gif' /> and it's freely available online.
http://www.csscreator.com/version2/pagelayout.php QUOTE To create your layout select the
structural elements your site requires (header, footer, columns). Then specify a size in the field
provided and choose a background color from the color chooser below. The color chooser changes
values as you move your mouse along a row. To set a value click on the color row to release click
again. Once the color in the box is th...

Lists, Unordered And Nested - some layout tricks (2)

Help Fix My Site's Css/layout Issues - Thanks for your time (9)

The first issue has been resolved. Please goto Post #7 to see the current discussion.
This is in reference to: http://facesofwar.org/cms/ When you load the page up in Firefox it
works fine. But when you use I.E. it creates a nasty line break after each of the spans containing
a dividing line. The relevant html is: CODE <span
class="menuOuter"></span> <span
class="menuMain">Home Iraq Alt.
Media Other Contact</span&...

Basic Css Layout Issue - Floated Cell with similar height (5)

Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem
being I don't know how to make a floated cell be the same height as another. FOr example CODE
<div id="main"> <div id="left"> just some </br> stuff
over </br> here! </div> <div id="right"> but...</br>
over here </br> I have </br> even more stuff</br> to </br>
display</br> </div> </div> now If I float the left to the left ...

Css Layout: Trouble With Ie - the scrollbar and margin-bottom (4)

I have a site which I'm developping and trying to get a frames-like layout design. But IE does
not propperly show the scrollbox, its hidden behind the fixed divs of the top header and the bottom
footer... Firefox does alright, so If you dont understand what I mean you can check it out here:
http://web.cucea.udg.mx/ineser/alap/test.php Seems like Opera and Safari are doing also good...
And also, the margin of #content (which is the main content area) is not working, becouse it does
not go up above the footer, I don't know what is going on (that rule is ins...

Unordered List Css Layout - two rows of list and sublist (4)

I have a layout which i want to do fully in CSS. Im having trouble centering the second list, or
sublist which comes from the menu. It doesnt work in IE now, just firefox (Actually the page doesnt
even show on IE, nor Opera, i dont know why). I just want it to appear centered, when im hovering
the main list, not left aligned... Here's the link, youll understand when you see it...
http://web.cucea.udg.mx/cucea/graphix/level5/ I also want to fix the background, (i removed the
background for now) becouse when i hover the sublist items, the background becomes bigge...

Moving Ads With Css Layout On Free Hosting - CSS help (7)

Can anyone help me how to move top banner from free host? I hear that can be done with css!...

Css How To Use It? - how do you use it to make a custom layout 4 website? (3)

how you make a custom layout and what is the coding and stuff?...

Css Files, Get Your Css Files Here! [resolved] - Want a nice CSS layout? (0)

Alright, if anybody wants a CSS layout; I'll make one for you! Just tell me what you want
the background color to be, main font color, and the link colors! Then later in the topic
I'll post them and I'll post the username of the user that requested next to them so you
know which one is yours! So if anyone wants a CSS File; Ask Mike! >_>...

Looking for css, layout, layout

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