Any help for getting to grips with CSS & DIV's etc?

Hi, I’ve finally decided it’s time to move on with my web site building knowledge (feeble that it is), but I warn you now, I can be really thick at times lol, currently this stuff may as well be in Greek, I’m a stumbler who can pull stuff together most of the time, but have no training etc, so will probably be overwhelmed with some of the things you will be telling me so be gentle lol.

Not sure where to start, in simple terms I am rebuilding a mates site, it is a mess even by my ability’s, so much so it’s easier for me to start from scratch rather than unravel his stuff, it’s pretty basic, and knows what he wants for the most part, and generally speaking I have got it pretty well sorted, BUT, I have had to use tables to do so, I figure it’s time to get to grips with doing it a better way, but unfortunately this is where I am starting to drown.

For the life of me I can’t put this together without tables, well not quite true, I have blundered around and got something that looks just fine on the surface, but I am certain I have made a total mess of getting it right, so I figure it’s about time for me to learn how to do it right so to speak, Here is what I have done using tables, I have managed to repeat it in DIV’s, but pretty sure I made a pigs ear of it in the process, so hows the best way for me to duplicate this properly ?

I can upload what I’ve done in DIV’s etc if it helps to show where I am going wrong (but there are minor style changes from this one), I just don’t know where to start with giving you what you need to see what I am doing wrong, just say what you need to help me move forward.

The best thing would probably be for your to post a link to the new version of the site, and then we can have a look and see how well you’ve done, and give you some tips and suggestions.

Sorry for a slow reply, I had deleted my last effort so had to make it all over again, the contact page has no content, because until I get this cracked I can’t see the point, because that will be another ball game, so figured get the layout sussed first, then I can move on, anyway Here is what I did today, the other link still works so you can compare and get an idea of what I’m trying to do, hopefully this gives you an idea of what I can weakly understand lol, Thanks for the reply.

My first tip would be to try to avoid using absolute positioning so much. The big problem you have is that the content needs a huuuge screen before it looks centred - on most screens it will be way too far over to the right, sometimes even off the edge of the screen.

You seem to have the source code in a funny order - it’s usually much easier to have it in the same order that it appears on the page (with the exception of right-floated elements, which need to come first), so then you can make use of the natural layout without having to absolutely position everything.

And don’t just think of <div>s and <p>s! You have lists of links, which could be better marked up as <ul>s and <li>s rather than <div>s and <p>s.

You can get rid of the Javascript to swap the images by setting it as a background image on an empty div, and then having a :hover to change the image. This won’t work on IE6, but tends to be a bit slicker everywhere else.

(Another thought that has nothing to do with the coding but is relevant - I would generally steer clear of Lucida Calligraphy. It’s one of those fonts that just shouts “let’s party like it’s 1999”. It’s neither elegant nor particularly readable. Using Arial, especially for body text, on the redesign is a big improvement. If you want to keep L.C. for headings, at least take the italics off, so that it doesn’t look quite so deformed!)

also, you dont need <br>s between <div>s. in fact, chances are you wont need <br>s again…

speaking of which, I noticed you used rollovers for your car image, you could get rid of the javacript and use :hover instead

<a id=“apDiv6” href=“#”><img src=“Images/Jaguar.jpg” class=“hide”><img src=“Jaguar-Interior.jpg”></a>

#apDiv6 {display:block;}
#apDiv6 img.hide, #apDiv6:hover img {display:none}
#apDiv6:hover img.hide{display:inline}

see , no js!!!
== : )

Thanks for the replies and advice but I am far from being able to take onboard much from it due to my lack of experience with this, I did warn I would be hard work lol, I will have a play with some of the code a bit later when time allows, but it will be pure logical guess work if I get it right at this stage.

Thanks Again

I tried to edit the post rather than make a fresh one, but I guess there is a time cut off for edits ?

Anyway had a play with that code (simple copy and paste), and stumbling around found where to place it, but it has created 2 things I can’t seem to edit, first the div is not where I want it (it’s a bit higher under the top div), and the pic is centred, which means the writing goes over it, I also noticed that the roll over doesn’t seem to happen, in live view when I hover the mouse over it the main image disappears, but no other image shows in place, almost certainly down to my not understanding this stuff properly, but thats where I’m at currently.

You’ve got {position:absolute;} several times in the stylesheet!

I have used li and ul, but found the spacing was more than I wanted, or added elements I did not want (eg bullet points).

That’s what CSS is for! You can change the top/bottom and left/right margins on any elements. You can remove the bullet points with {list-style-type:none;}.

You are now venturing into a new language for me, again I know of it, but no working knowledge of how to use it, any use of it you may see here is purely a side effect of doing what I knew got me a result I wanted, thats it.

In the HTML, you could <div id=“picture”>
then in the CSS you could have
div#picture {height:300px; width:400px; background-image:url(car-outside.jpg);}
div#picture:hover {background-image:url(car-inside.jpg);}

Yes I appreciate thats what is in the code, but it wasn’t put there knowingly if that makes sense, such coding is over my head, I just know what I want to achieve, and have found ways to get it so it looks like what I am aiming for on my screen, but thats only by using the menu options, not by personally adding the code, so such entries are residual affects of my limited knowledge of how to do this the more appropriate way, hence my arrival here to help get my head round such things, but for now most of what has been said is beyond my ability to truly understand this.
I guess in simple terms I simply want the site to be centred, and use say 75% to 80% of the page width, up to now I thought thats what I was achieving, but by the sounds of it obviously not.

I have done an intro in the n00b section which I give a fuller history of my abilities with these things, but in short my coding knowledge is extremely limited, I have just managed to use menu options to get things looking the way I want, my understanding of the code behind it is extremely limited, about the most technical thing I can do with some ease is edit existing code to make subtle changes in font etc, but adding\using code as you have there is way over my head, but is what I am here to try and understand, but until the penny drops it will not be an easy task, sorry to be a pain but I will try my best to understand, but currently it is over my head just quoting code directly the way that has been so far, Thanks for the help so far, I’ll have another play tomorrow when time allows with this new info.

The first thing you need to do is to understand the different positioning models. I would recommend this article as a good primer.

Once you’ve got your head around the basics of positioning, what I would do is start by sketching out the main blocks on a piece of paper. Think about where you want them to be, in relation to other elements and the window itself. Do they have to be a fixed width (in px) or a proportional width (eg, 30% of the available space?) Think about whether they can be positioned relatively or by setting a large margin (both of which keep them in ‘the flow’), whether they can be floated, or whether you have to fall back on the last resort of absolute positioning.

Remember that lots of people will be looking at your site on screens 1024px wide, and narrower.

You might find some comfort in reading this thread as you can see that the transition from tables to css can be achieved although there is a lot of work to do and a lot to learn along the way.

Here’s a quick revision of your table layout into CSS:

<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hansom Carriagese</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<!-- styles in the head for example only but should be removed to main.css -->
<style type="text/css">
/* reset stylesheet*/
html, body, table{
    margin: 0;
    padding: 0;
    font-size: 100%;
object, iframe,
h1, h2, h3, h4, h5, h6, p, 
dl, dt, dd, ol, ul, fieldset, 
form, legend, table, caption, th, td {
    margin: 0;
    padding: 0;
h1, h2, h3, h4, h5, h6, p{margin:0 0 .5em}
/* remember to set a left margin or padding to ul or ol when you want a bulet to show and add list-style:disc*/
ol, ul {list-style: none;}
a img,img{border:none}/* remove borders from linked images*/
/* set your default link states here */

/* end reset styles */

/* main styling */
    text-align:center;/* ie5 hack to center layout*/
/* main container holds all content*/
    margin:auto;/* auto side margins automatically center layout.*/
    text-align:left;/* reset text to left*/
.logo img{
    margin:10px auto 25px;
    overflow:hidden;/* contain floats*/
    margin:0 0 25px;
    margin:0 0 25px;
.sidelinks1 li,.sidelinks2 li{margin:0 0 10px}
.sub h2{
.sub h2 span{
    display:block;/* create block box on new line*/
    clear:both;/* clear floats that are above*/
    overflow:hidden;/*containe floats*/
.sideimg,.sideimg a{
    background:url( no-repeat 0 0;
.sideimg{margin:0 0 25px;}
.sideimg a{visibilityvisible}/* ie6 hack */
.sideimg a:hover img {visibility:hidden}
p.text {
    padding:30px 50px 0;
    margin:0 0 25px;
* html .sub, .html p.text{height:1%;overflow:visible}/* ie6 hack to enforce haslayout*/{
    padding:25px 100px;

<body id="home">
<div id="outer">
    <h1 class="logo"><a href="#"><img src="" width="702" height="176" alt="Hansom Carriages"></a></h1>
    <div id="header">
        <ul class="sidelinks1">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2 </a></li>
            <li><a href="#">Link 3</a></li>
        <ul class="sidelinks2">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2 </a></li>
            <li><a href="#">Link 3</a></li>
        <div class="sub">
            <h2>The Private  Hire Chauffeur Service<span>+44 (0)7796 445 032</span><span>+44(0)1483 833 661</span></h2>
    <div id="main">
        <p class="sideimg"><a href="#"><img src="" name="Jaguar" width="452" height="214" alt="Jaguar image"></a></p>
        <p class="text">Start your holiday or business trip with a comfortable,
            stress free journey to the Airport. Our prices compare
            favorably with any taxi or private hire company in the area.</p>
        <p class="credit">Most Credit / debit cards accepted</p>
    <div id="footer">
        <p>Style, Comfort and Courtesy are the main objectives of our service.
            Our drivers are carefully selected, CRB checked, fully licensed and insured.</p>

It’s not supposed to be an exact copy but just an idea to show how you don’t need any positioning apart from floating to create the layout. I don’t expect you to understand it yet (or even use it) but it will help when you try things out and can refer to it to see how things work.

Yes I agree if I understood positioning properly then it would be much easier for me to take the next step, problem is finding something that can make me understand better which I can get to grips with, so far I’ve just confused myself even more, I’ll have a look through that shortly and see if it makes more sense than anything I’ve seen so far.

The latter link is the one that brought me here to start with, I started reading it then gave up when the debate started, but I will read through the whole thing again and see if anything further down opens my eyes at all.

I understand the concept of positioning, and in my mind I know exactly where I want things to be, my problem is understanding the code to do this correctly, one of the many reasons for being here I guess, I figured %'ages are the approach most likely to get pages loading the same on all screens maybe ?
But not sure how to use these in CSS, anyway I’ll have a read, then a play and see where it takes me, Thanks for the help.

The main concept to grasp is that you let the flow of the content dictate a lot of how the page is constructed. You have to get away from thinking about positioning in a certain point but rather maintaining the flow of the document and allowing things to fall into place naturally.

In my example above there is no positioning as such but one element moves to the next and margins are used to push one element away from the other or to make space where required. This means the elements can expand and grow but still maintain their relationship between each other.

When you need horizontal alignment (such as columns) then you float the elements so that content can be side by side. You just have to remember to clear the floats when you want to regain the flow of the document once again.

Absolute positioning is used in small doses but usually in confined spaces where the flow of the document is already maintained. You would set a stacking context with position:relative on the parent and then place the child absolutely in respect of that parent and not the viewport. The absolute element does not take part in the flow of the document and will therefore overlap anything else so when you use it you must ensure that it doesn’t overlap and the flow of the document is still maintained. Usually the parent would have a height (or content height) that maintains the flow so the absolute element is protected.

There’s a lot to learn at first and although you may learn how to do something it doesn’t mean that it’s the right choice as CSS allows layouts to be done in many different ways but usually there is an optimal way to do it depending on the situation. There is no one right answer for all layouts.:slight_smile:

I think my content just flowed out of the door lol, my head was still spinning from reading the above link, and although it was as I feared a debate over the benefits, it told me very little, I am in no situation to argue what is best, I simply aim to learn the best (well try to lol), the only thing that did stick in my mind was using %'ages for font sizes, never heard of that before, but I understand the reasoning behind it and the benefits.

But “Flow of the Document” went over my head in a jet plane, I can’t even begin to understand what this concept is, and fear until I do I may not be able to advance much, I get that it should be in a 1 2 3 type order, but how to even do this is beyond me, I have got the habit at starting at the top, then moving down the page from left to right until I get to the bottom, to me that is a 1 2 3 order, but by the sounds of it I’m not getting it right ?

It’s great that you’re working so hard to learn this stuff. Don’t do what I might have done in my early days and just slam Paul’s code into your site and go “woo woo!” Save the original file, then make a copy and play with it. Take elements out and see what the effect is on the entire page. Add new stuff. Change stuff. That’s the way I learned what little I know, for what all that’s worth…

Also, you’re doing something else I used to do, thinking horizontally (like print). 1-2-3 from L to R can be a confusing way to approach your code structure.

I don’t like to flog my work on these forums (no catcalls from the peanut gallery!), but you might find the “best practices” link in my sig useful.

lol - no worries :slight_smile:

I’ll try and simplify it a bit (and keep it short).

The flow of the document is basically how content flows form one element to the next should no specific rules be applied to it.

For example you start with a heading:

<h1>Main Heading</h1>

Now you want some text to follow that heading:

<h1>Main Heading</h1>
<p>Some text … more text etc.</p>
<p>Some text … more text etc.</p>
<p>Some text … more text etc.</p>

There have been no styles applied to the above (apart from their defaults) but the above will display in order and you will get your heading folowed by the paragraphs and all flow one after the other and will re-adjust and move as the browser is resized.

To make vertical space between the elements we can add a margin to them.

h1,p {margin:0 0 1em)

Now we have forced all the elements to have space between them but still nothing overlaps because they are all in the flow and just push each other down a bit. We can add elements in-between or add elements above and below - we don’t need to change anything and nothing breaks.

The whole page is in-flow and one element runs into the next. Nothing is restricted or contained.

Generally though you would want a page wrapper to hold your content so as a start you create an outer that has a width to hold all the page content and at the same time usually centre it in the viewport.

margin:auto;/* center it */

So now we have:

<div id=“outer”>
<h1>Main Heading</h1>
<p>Some text … more text etc.</p>
<p>Some text … more text etc.</p>
<p>Some text … more text etc.</p>

Now we have a fluid width page that has in-flow content that will stay within #outer and exand and contract with the viewport as required.

If you contrast that behaviour with what happens when you place a block on the screen absolutely at left:100px and top:100px you will see that the absolute element is an immovable island that doesn’t react to other content and takes no part in this flow. Sometimes that’s what you want but only in controlled places and not as a structural part of the layout.

Hope that makes sense.:slight_smile:

No I never do that, I will use it as is, then break it, many MANY times lol, I have found that by messing up and starting afresh each time I stuff up actually helps me understand more, I am not a book person, I’ll learn more in 15 minutes of doing something than a month of reading about it, generally speaking anyway.
As to the order I feared it was not doing me any favours figuring this out, something else to mess with my head lol.

Eeeerrrrrrrrrrrrmmmmmmmmmmmm No :sick: lol, but I will certainly keep going through following examples above etc and hope it starts to sink in, my guess is when I finally understand such the rest will also start to make more sense, until then I will be wading in mud.
I get the first part just fine, no different to the 1 2 3 order I was using, but how does positioning and fonts\decoration etc fit in to this ?
Would they interrupt this flow ? I’m just trying to get my head round what would “break” the flow, because ATM it looks like my 1 2 3 approach.

Thanks for all the help people, I’ll keep trying.

Yes it’s much the same and content flows from one element to the next in a logical order. You don’t need to do anything special until you need to change their position in some way. Even when you give those elements a width (and in some case height) and move them with margins you still don’t interrupt the flow of the document.

You can size the fonts nudge the margins and still the flow of the document is preserved. You can still then still add elements before and after without too much trouble also.
but how does positioning and fonts\decoration etc fit in to this ?
Would they interrupt this flow ? I’m just trying to get my head round what would “break” the flow, because ATM it looks like my 1 2 3 approach.

Font sizes and decorations and colours etc don’t affect the flow at all. It’s only when you use absolute positioning or float the elements that the flow is disrupted and things get a lot more complicated.

When you need two elements side by side you would need to give them a suitable width and then float them side by side. Floats are removed from the flow but allow following text to wrap around by default. If you want the following text to be clear of the floats then you apply clear:both to the following content and the flow of the document is once again regained.

The only real way for this to sink in is to test these things out time and again until you suddenly grasp what’s going on. I still use this method for advanced css3 when I want to find out how things work. I can read and understand the specs but it never really sinks in until I play around with the properties and see how they really behave.

It’s steep learning curve at first but in a couple of months it will be second nature.

It will also help if you don’t create your pages and check their appearance with your software and browser running maximised to fit your screen - 1400px wide perhaps? Not everyone has a screen as wide as yours, and among those who do, many do not run their browser maximised anyway. So reduce the browser to about 1200px or less, and make the pages to fit nicely in that. It will still look okay for those with wide screens, but not be thrown over to the far right for the rest of us. On my laptop, with its 1280px width screen, I usually have the browser taking up about 1000 - 1100px width, so I can see other software to the side of it. People with wider screens often run two programs side by side to take advantage of the area available (poorer people like me have a cheap second monitor plugged in for even more space)

You ain’t kidding lol, I’ll be needing oxygen by the time I get through this lol, but would I be right (in simple terms at least) in saying that the only thing that can interrupt the flow are div related, eg absolute or float ?
Not that I understand these yet lol, I guess at this stage I’m laying a basic foundation to build off of, I suspect there will be exceptions to this idea, but at this stage I’m just trying to get the basics I guess, Thanks for you’re patience lol.

Yeah one of his issues is how it looks on his phone, so thats a handy tip I wouldn’t of thought of, Thanks.