Hi everyone, I am having real trouble with a website I am working on. It's not a real company, but a mock up I have to do as part of the IT A-Level I'm trying to do.

 

As you can see from the attached file, the right hand side of the content (the DIV is called "content-right") floats below "content-left". I want them to be next to each other, and I can't spot anything in the code thats causing this not to happen. It's easier to understand when you open the web page!

 

Please can you look through my code and see if you can find why it's not working properly?

 

I have attached a .zip file. It contains the .html file, the .css file and the img folder.

 

Other than that, what do you think of the code in general? I'm still teaching myself but it all validates so far!

 

 

Thanks

 

Toby

toby_website.zip

In #wrapper #content #content-left add float:left;

 

As floats are really annoying and if you want them to sit one next to another both need to have a float attribute.

Wow! Easy as that...

 

Thanks so much Dizi, you're a lifesavaer!

 

What did you think of the rest of the code?

It is ok code, there is nothing really wrong with it, but I will give a little bit of advice as I think honesty will help you learn a few techniques

 

I think you rely a little too much on the <div> tag, I used to do the same thing, I would wrap everything that needed to be edited into a div as I thought that was the way it needed to be done. However the reason from coding in Divs and not tables is to make the end HTML as light as possible, the best way to do that is to take advantage of what a Div is actually capable of doing.

 

A Div is a divide and each div can format elements of html differently to the others on the page. So you can edit in css the colour of the divs background, its height and width, but also things like paragraphs, images, headings...ect. All you need to do is in the css tell it which element you wish to change for example:

 

#style1 { 
width:500px; 
height:500px; 
background-color:#009999}

#style1 h1 {
font-family: "Century Gothic", Arial, sans-serif;
font-size: 16px;
font-weight: normal;
color: #0000FF;
text-decoration: underline;}

#style1 p {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
line-height:22px;}


#style2 {
width:500px;
height:500px;
background-color:#99CCFF;
border-top-width: 4px;
border-top-style: dashed;
border-top-color: #000000;
font-family: "Courier New", Courier, monospace;}

#style2 h1 {
font-size: 36px;
color: #00FF00;}

#style2 p {
font-size: 10px;
color: #9966CC;
line-height:30px;}

 

<div id="style1">
<h1>heading </h1>
<p> text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text </p>
</div>
<div id="style2">
<h1>heading </h1>
<p> text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text </p>
</div>

 

 

So if you take advantage of what a div can actually do rather than making a div to do each new thing you need when not necassary you can save yourself a lot of coding, and also make your html more structured, cleaner and easier to read.

 

 

Just quickly so you can see something that you have coded using this cleaner method, here is how your header would look:

 

HTML:

 

<div id="header">
<img src="img/logo.gif" alt="DM Carpets" width="86" height="100" />
<h1>DM Carpets</h1>
<h6>0800 566 566<br /><a href="mailto:mail@dmcarpets.com">mail@dmcarpets.com</a></h6>
</div>

 

 

CSS

#header {
width:800px;
width:800px;
height: 100px;
margin: 0 auto;
text-align:left;}

#header img { float:left; width:86px;}

#header h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-weight: bold;
color:#FF0000;
float:left;
line-height:80px;
}

#header h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
float: right;
color:#FF0000;}

 

 

 

Please don't think that I am having a go at you for coding the way that you have, I think what you have done is great for someone who is learning, I just thought you might want to learn a nicer way of coding

ok thanks very much. I'll have a look into coding like that and see if i can learn it!

thanks dizi!!!