Divs won't float correctly

**kvnwpts** · Mar 16, 2012 19:04

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:

Code:

<!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:

Code:

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** · Mar 16, 2012 19:39

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** · Mar 16, 2012 20:01

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.

Originally Posted by RyanReese

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?

**RyanReese** · Mar 16, 2012 20:06

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** · Mar 16, 2012 20:27

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?

Originally Posted by RyanReese

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.

**ralph.m** · Mar 16, 2012 20:31

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** · Mar 16, 2012 20:32

Originally Posted by kvnwpts

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?

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** · Mar 16, 2012 20:38

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

Originally Posted by ralph.m

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.

Heh, okay.

Originally Posted by RyanReese

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.

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

**ralph.m** · Mar 16, 2012 20:47

Originally Posted by kvnwpts

I just get confused over how it looks in dw preview since I'm not good at coding

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

**RyanReese** · Mar 16, 2012 21:02

Originally Posted by kvnwpts

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

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** · Mar 16, 2012 21:37

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

Originally Posted by RyanReese

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

**ralph.m** · Mar 16, 2012 21:45

Originally Posted by kvnwpts

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:

Code:

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

and then this in the CSS:

Code:

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

**kvnwpts** · Mar 16, 2012 22:11

Ahh. Thanks

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

Originally Posted by ralph.m

Start with this in your HTML:

Code:

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

and then this in the CSS:

Code:

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

**ralph.m** · Mar 16, 2012 22:43

Originally Posted by kvnwpts

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!

**kvnwpts** · Mar 16, 2012 23:22

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

Originally Posted by ralph.m

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

User Tag List

Thread: Divs won't float correctly

Thread Tools

Display

Divs won't float correctly

Bookmarks

Bookmarks

Posting Permissions