• wbmkk
  • New member
  • Offline
  • Gender: Male
  • From: Whitley Bay, England
  • Registered: 2009-10-14
  • Posts: 5

Topic: CSS layout Help Required .. please !!

Hi

I am developing a web site, but need some advice please. I am a beginner, by the way, only reading my first HTML and CSS book within the past few weeks. I found this forum from the CSSTutorial web site

On my site, there will obviously be a header, with horizontal navigation buttons directly underneath.

Now the tricky bit …

Below, I want each page to be made up of numerous text boxes, each coloured differently, but not quite touching each other

Imagine a wall built with different coloured bricks. between thick beds of black mortar

How would I do this ?

Reading on line comments I note that there is a serious problem with some old IE browsers, meaning boxers can be a bit problematic to position, especially for a learner, hence my request for some assistance.

I understand the ‘box problem’ concerns margins and padding, so I was thinking of keeping the padding and margin properties at zero for each of my boxes, set sizes for each box and make sure the font inside is small enough not to force the boxes to extend.

Maybe it would just be easier for me to try to use tables and use the colspan property to join cells. I thought though, that using tables for layout was a bit frowned upon.

Although a learner, I am sure I could do it this way, without any help, but this option seems to me, as being a bit of a defeatist way of doing the job.

I may add a left hand navigation section too, but this should not prove difficult for me

Many thanks for any input given !!
smile

2 Reply by lm

  • lm
  • Advanced Member
  • Offline
  • Gender: Female
  • From: The Netherlands
  • Registered: 2008-12-20
  • Posts: 2,770

Re: CSS layout Help Required .. please !!

why not to try grid layout if you want to get " numerous text boxes, each coloured differently".

It becomes more and more popular now as an alternative to tables: CSS grid.

If you google CSS grid, you'd get many sources and good documentation on it.

I find Blueprint CSS quite easy to implement (could be daunting for beginner but the reward will be also the learning process of rather advanced CSS.
The main advantages of CSS grid are good browsers support and neat outcome especially if you need multiple text boxes.

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: CSS layout Help Required .. please !!

Padding and borders used to be a problem in versions of IE but not if you use a doctype right at the top of your html page, before the <html> tag. We suggest HTML 4.01 Strict on this forum:-
http://www.w3.org/QA/2002/04/valid-dtd-list.html
or the transitional in some cases where elements are deprecated (old and being phased out).
A doctype means that margins, padding and borders will be outside the element's (like a div's)basic size for all browsers whereas without a doctype IE will calculate padding and borders inside the basic size.

Start the right way and use divs, then use margins and/or padding to keep them apart.

All div boxes on one row need either float: left; or float: right;

Between the rows put a nil-height invisible "clear" div to clear the floats above to start a new row.

CSS:-

#container { width: 860px; margin: auto; }
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
.left { float: left; width: 250px; margin: 5px 10px; } /*top & bottom 5px, sides 10px*/
.right { float: right; width: 300px; margin: 0 10px; }

Markup:-

<div id="container">
<div class="left"><p>..........</p></div>
<div class="left"><p>..........</p></div>
<div class="right"><p>..........</p></div>
<div class="clear">&nbsp;</div>         <!--forms invisible barrier between rows-->
<div class="left"><p>..........</p></div>
<div class="left"><p>..........</p></div>
<div class="right"><p>..........</p></div>
<div class="clear">&nbsp;</div>
</div>


Put all of the markup in a containing div with a width sufficient for all the inner divs if you wish but it's not essential. The margin: auto; will center it in large window resolutions.

Last edited by Wickham (2009-10-25 09:29:53)

  • wbmkk
  • New member
  • Offline
  • Gender: Male
  • From: Whitley Bay, England
  • Registered: 2009-10-14
  • Posts: 5

Re: CSS layout Help Required .. please !!

Thanks for that Im, I'll investigate that option

Thanks too Wickham, but a couple of points

I copied your coding to try it out, adding background colours as required, so i could see it.

For some reasdon, the 3rd box on each line was coming out slightly higher, but I noticed your margin figures were slightly different, so that was easily sorted.

I added another row and all was well

Now, I would like every other row to be offset by half a width, as bricks would be in a wall, so rows 2 4 6 etc would have one box fewer

Is this straightforward ?

Also, are the height fixed as I don't see any box height code. I need them fixed: I can add an overflow option as required

thanks!

Last edited by wbmkk (2009-10-25 14:29:44)

  • wbmkk
  • New member
  • Offline
  • Gender: Male
  • From: Whitley Bay, England
  • Registered: 2009-10-14
  • Posts: 5

Re: CSS layout Help Required .. please !!

A quick update Wickham

I’ve been messing about with your code etc and it all seems remarkably easy. Many many thanks

I opted to just use the ‘left classes’ mainly because I couldn’t see how the right class fitted in and everything seemed to work all right. Please tell me if I’m missing something, as you obviously used it for a good reason

I added a border to each and have been adding some text and still all is OK.

But I’ve hit a snag.

I want to use different border and background colours for each box.

Would the easiest way, be just for me to re-write your code and styles, but instead of a single class (or two if I need the right one) write for each box, for example ‘row1box1’ ‘row1box2’ … ‘row4box4’ etc etc

There’ll be more code, but, hey who cares if it works

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: CSS layout Help Required .. please !!

You can use all left classes or all right classes or a mixture. If the container is wider than all the nested divs, then a right class can create a space between it and a left class on its left. If the container exactly equals the total of the nested divs then it doesn't matter which you use.

If you add borders, remember that they add to the div width so you will probably have to increase the container width or reduce a nested div width.

I used the same style in each row, but you can of course use different class names, especially if they are different widths in each row or have different backgrounds.