Divs not floating side by side, but going underneath

[simplykells]

http://www.ziggiebless.com/test.html. Please note the photos and other divs on the right should be next to the bio not below.
http://www.ziggiebless.com/revisedstyles2.css.

Thanks in advance for your help.
Raquel

[MikeD]

You need to float the blocks on the right side not push them over with left margin. Set them to float: right and they’ll kick up where you want them. Until you float the elements they want to take up the full width of their parent container.

[simplykells]

oh ok, i’m going to try that, i am absolutely driving myself crazy. It seems i’ll spend a day figuring out something. It will work and then the next day i’m doing the same thing all over again :(. I’ll let you know how it turns out, thx again!

[matt_sanford]

have you tried changing the display property from block to inline-block? I’m sure you know but block level elements don’t allow any other elements to be beside it. Good luck.

[simplykells]

Hi Matt,

I totally messed that up. I am new to CSS, have been teaching myself since April. Whenever I think i got it, i screw something else up. I took a break. I am now working on a new page, not using margin left like i did in the past. I am trying to have two columns, bigger videos float left (width 600 x 400) smaller videos float right (300 x 300). I need the smaller videos to stay to the right and immediately start underneath each other instead of starting at the 400 height of the floated left items. What do i need to do?

http://www.ziggiebless.com/videostest.html
http://www.ziggiebless.com/videostest2.html

The difference is first one, i had video div and left div next to each other. Second one i have all video divs first and then left divs. Please help!!! Thanks.

my style sheet rules for this page
}
.live{
float:right;
width:300px;
height:300px;
padding:10px;
}
.video{
float:left;
width:600px;
height:400px;
padding-top:10px;
padding-left:15px;
}
#video-wrapper{
width:960px;
padding-top:10px;
}
stylesheet in http://www.ziggiebless.com/revisedstyles2.css (it’s a mess from all my attempts at working on this site. I will fix once i’m done with fixing pages)

I might post this to the group as well since I’m not sure how often you are on and how soon you can get back to me.

[Paulie_D]

The problem is the way you are inserting each individual div.

Have a div for wide/tall videos and a second for thin/narrow videos and put only those videos in each div.

I’ll try an work something up later in codepen to give you the general idea.

[simplykells]

Thanks Paulie. I thought that is what I did. I have a video wrapper div and I just created a live wrapper div, the same thing is happening :(

http://www.ziggiebless.com/videostest4.html

}
#live-wrapper{
width:300px;
padding-top:10px;
}

[Paulie_D]

Here you go: http://codepen.io/Paulie-D/pen/gctzA

[simplykells]

thank you Paulie I can’t way to see it work!!! I will let you know :)

[simplykells]

Thank you Paulie, you are a Godsend!!! The only thing is in dreamweaver design view i can only see the first row, but i can work in code. My dreamweaver cs5 has been acting very screwy and I have been forced to work in code view alot more recently. Thanks again for your help. Hopefully i don’t screw anything up once i add the videos. I’ll keep you posted :)

http://www.ziggiebless.com/videostest4.html

[Paulie_D]

It looks like you may have not floated the video-wide or video-live divs but good luck with it.

[simplykells]

Hello Paulie,

I have started putting in some of the videos and only the first one is showing. What did I do wrong?

http://www.ziggiebless.com/videostest.html

[simplykells]

Also I just copied and pasted your code in. I didn’t realize i had to float those divs :/

[Paulie_D]

Looks like you’re getting there.

[Paulie_D]

You’re giving the video divs all the same ID. You can’t do that.

[Author]

Posts