Divs won't float correctly


I have a wrapper, in that I have two upper divs, both floated to the left so they are in line.

Under the two divs I want to do the exact same thing so under those two divs I have another two divs.

The problem is that they wont float correctly, the div just stays under the div and dosen’t float as I want it to.


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css"rel="stylesheet" type="text/css">


<div id="wrapper">

<div id="social">

<li><a href="http://www.twitter.com/kvnwpts"><img src="images/Twitter.jpg" width="65" height="61" border="0" /></a></li>

<li><a href="https://www.facebook.com/profile.php?id=100003071417669"><img src="images/Facebook.jpg" width="65" height="61" border="0" /></a></li>

<li><a href="http://www.youtube.com/kwpvideos"><img src="images/Youtube.jpg" width="65" height="61" border="0" /></a></li>

<div id="logodiv">
<img id="logotyp" src="images/logo.png" width="491" height="64" />

<div id="one">


<div id="two">



And the CSS:

body {background-image:url(../images/rutn%C3%A4t.jpg); }

#wrapper {width:980px; height:800px; margin-left:auto; margin-right:auto; }

#social { float:left; width:300px; height:100px;  }
#logodiv {float:left; width:680px; height:100px;  }

#social ul { }

#social ul li { display:inline; padding-left:15px; }

#logotyp {margin-left:50px; margin-top:20px; }

#one { clear:both; float:left; width:400px; float:left; height:200px; background-color:#FF9966  }

#two {  width:400px; float:left; height:200px; background-color:#9C0  }

Any help is appriciated.

Hi. I’m a bit confused. What part is not lining up side by side like a float should? Tested in Chrome/FF/IE7/8/9 and all of them are displaying two lines of stuff, one being those images, and the second being those colored boxes. How is it displaying for you? :slight_smile:

Its displaying as it should in the browser(s), but in dreamweaver the boxes are under eachother. (The colored boxes)

Sorry for not mentioning that before.

Dreamweaver design view is based off a REALLY old Opera version. Don’t worry at all about that design view. It’s not a browser, so why should you bother coding for it :).

Move on. It’s not important at all to fix this since your users won’t experience seeing the site in Dreamweaver.

But the coding is right, or is there anything to do to fix it since it’s pretty annoying to work with something that’s not correct seen in DW anyway? :confused:

Do you also encounter problems where it dosen’t show the same in the browser as in DW even though coding is right?

As Ryan said, how a site looks in Dw is irrelevant, as it’s not a browser (or is a very old version of one). Test your sites in real browsers and there’s no issue. Testing your site in Dw is like testing an airplane in the water. It’s an irrelevant test.

I don’t have Dreamweaver. I find it useless to me. I prefer just using straight up Notepad to code :). Can’t get any simpler than that.

And your coding is right. The Opera version is REALLY old. It doesn’t understand a lot of CSS correctly as most browsers do nowadays.

That really sucks to be honest, it would be good if they could like “implent” how firefox looks in the preview in DW.

Heh, okay. :slight_smile:

EDIT: I just get confused over how it looks in dw preview since I’m not good at coding (I’m learning as you know).

And you can call me Kevin if you ever gona say my name :slight_smile:

We are all confused about Dw. Focus your confusion on real browsers, as they will provide you with plenty. :slight_smile:

Well you could always just recode Dreamweaver so that it includes the FF version.

Or you could make your own WYSIWYG editor (don’t)

ORR you could just save hte file and view in browser (really such a simple thing to do. CTRL+S, switch programs. CTRL+R).

I think I’ll do nothing about it really. I think Ill have to live with it.

By the way, for this question it’s unnessecary to make a new thread.
The case is:

I have a unorderd list with three pictures in <li>.
And I have a slideshow wich also contains ul and li properties.

I have them both ul and li in my stylesheet but im not sure how to do them individual so the <ul><li> for the pictures is seperate to the slideshows <ul><li>.

Start with this in your HTML:

<ul class="slideshow"></ul>
<ul class="pictures"></ul>

and then this in the CSS:

.slideshow {... styles for the slideshow list ...}
.pictures {... styles for the pictures list ...}

Ahh. Thanks :smiley:

I hate to have like jquery slider plugins on my website cause in dreamweaver it justs get confused and messy.

You aren’t still viewing things in Dw, are you? It’s not a browser! Code in Dw, view in a browser!

I don’t, but still it’s sometimes good to take a quick view. But i don’t trust it.