View Full Version : Html and CSS layout with Divs

07-15-2011, 05:21 PM

I am going to have to build it myself !

So, the first step is Laying Out the Pages with Divs

Can anyone provide any help ?

It seems to need 3 Divs inside 1 Div

A little help for a young entrepreneur is greatly appreciated

Thank You

07-15-2011, 07:56 PM
I think I see what you mean ... you want to get away from using tables as a layout and use div's instead?

well, a simple example similar to what is shown on your page, but using 3 div's contained inside one div would be a bit like this inline example.

<div style="width:500px;height:500px">

<div style="width:250px;height:500px;float:left;background-color:#A9A9A9">

<div style="width:250px;height:250px;float:right;background-color:#C2D6D6">

<div style="width:250px;height:250px;float:right;background-color:#C0C0C0">


Of course you'd want to use a style sheet instead...

For more about how to use div's, I'd suggest reading here:


07-15-2011, 08:07 PM
what type of a layout do you want to have?

you want , you can have following script , if you like to:

<title> Bla Bla</title>
<div id="pagecontentcontainer">
<div id="head">
<div id="globalnavigator">
<div id="content">
<div id="footer">

this might be a useful skeleton for the html part. once you have created this one, you need to create also a css file, so you can declare attributes and values, properties etc. you need to decide either you want to have a fixed layout or a flexible one etc.

you got a lot of work, good luck! ;)

07-16-2011, 10:24 AM
My advice is to create a Photoshop .PSD (or similar) using coloured layers, just how you want it. Or perhaps you can take a screenshot of the tables layout (alt+printscreen while your browser is full-screened (F11) ).

Then take measurements from this graphic (slices help a lot with this!) to give you the general layout dimensions, which will feature in your code. Export the graphic layout as a jpg. You can then set this as a (temporary) background in the <body> to give you a rough visual guide to code around.

To get you coding properly, you'll probably need to drink up some tutorials, so here's what to look for first:
a) Linking an external stylesheet
b) The CSS Box Model
c) Manipulating the box model, margins, widths, padding and floats.

Once you have those basic tenets burnt into your brain cells, this will become a lot easier.

One caveat when designing visually is not to be too fussy at this most early stage. Getting your HTML & CSS positioning to mimic a fixed graphical layout exactly won't be easy, due to inherrant differences between a fixed graphic and the flexible environment of the browser(s).

To make things much easier, here's a tip: design using a two-stage process, as follows...

After designing your rough graphic -

1) Enter information in semantic flow into HTML document/ add IDs and Class structure to elements (such as divs). Then accord CSS widths, positions and margins, so that it roughly approximates your first design concept. Don't be too fussy at this stage! Add test borders and varying shades of grey backgrounds to divs for easy identification. Make sure everything is working as it should. That your page is flexible (if needs be) and now test/validate your code with the W3C.

2) Using alt/prntscrn, take a screenshot of this 'skeleton' which appears in your browser and import back into your graphics editor. Now you can go to town, developing precise graphical backgrounds and decorations to fit your 'skeleton'.

Doing things in this order helps you to keep your design flexible and within the bounds of HTML/CSS possibilities. There is nothing worse than endlessly trying to push code around to fit a regimented graphical layout which does not take into account web-page flexibility or illogical layout concepts.

I hope this helps.

07-16-2011, 01:41 PM
Thanks for this , me to creating project in PHP with the help of html and css. it might help me in my project, so thanks alot

07-16-2011, 02:04 PM

I see I am not the only Young Entrepreneur, Developer, Coder, Etc to have problems with the most basic of things: Layout using Div and CSS

I understand much harder stuff like Php Arrays and Sql Connection Strings, yet am falling at the first hurdle here.

I have seen some weird things done in CSS sheets attached to a Div where the style sheet had some of this in it:

html { }


div { }

and I guess I got misdirected by this.

Based on the posts so far,

1. www.w3schools.com is the best resource out there

2. <div style="width:250px;height:250px;float:right;background-color:#C0C0C0">
This seems the way to go

3. Code Validator at W3C i'm told

4. I do have a pixel perfect Screenshot Mockup built

5. Build it in the right order with the right attitude

6. I am not the only Young Entrepreneur/Coder in this situation


07-16-2011, 02:46 PM
Just remember, you can also use % for height and width.

For example, if you have already specified the containing div to be 100 pixels wide and 100 pixels high... any other div inside you can specify to be, for example, style="width:50%;height:100% and that would be the same as 25 pixels by 100 pixels.

You shouldn't use html inside the actual CSS file as far as I'm aware.

As for the div { } .. well, yes... that's CSS.

For example, if you didn't want to place all your styles in the HTML you would use CSS.
It's very, very simple to learn... if you are interested, have a look here:


Good luck with your project.

07-17-2011, 12:33 AM
Get ready for some frustrating head-benders though. To my mind (and this is only my opinion) CSS positioning is illogical and stupid next to tables (which are logical and sequential), so there is a HUGE paradigm shift to overcome once you start trying to create columns - and make them stay put. Plus, Internet Explorer doesn't help us at all, by adding extra margins and padding to elements. Anyway, you'll need to put: * {margin:0; padding:0;} into the very first line of your CSS to combat this. CSS positioning is hard to 'get' at first - but once you have it, it's with you for life...