Divs won't float correctly

kvnwpts · March 17, 2012, 1:04am

Hi.

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.

HTML:

<!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">
<head>
<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">
</head>

<body>


<div id="wrapper">


<div id="social">

<ul>
<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>
</ul></div>


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


<div id="one">

</div>

<div id="two">
</div>



</div>


</body>
</html>

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.

RyanReese · March 17, 2012, 1:39am

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?

kvnwpts · March 17, 2012, 2:01am

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.

RyanReese · March 17, 2012, 2:06am

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.

kvnwpts · March 17, 2012, 2:27am

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?

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

ralphm · March 17, 2012, 2:31am

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.

RyanReese · March 17, 2012, 2:32am

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.

kvnwpts · March 17, 2012, 2:38am

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.

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

ralphm · March 17, 2012, 2:47am

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

RyanReese · March 17, 2012, 3:02am

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).

kvnwpts · March 17, 2012, 3:37am

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>.

ralphm · March 17, 2012, 3:45am

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 ...}

kvnwpts · March 17, 2012, 4:11am

Ahh. Thanks

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

ralph_m:

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 ...}

ralphm · March 17, 2012, 4:43am

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

kvnwpts · March 17, 2012, 5:22am

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