CODEWITHSUNDEEP
csshtml
Braeden Orchard
Braeden Orchard

Reputation: 5

child div floating underneath its parent

So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.

Upvotes: 0

Views: 69

Answers (3)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4450

If you're looking to have the two divs side by side here's a fiddle for that.

http://jsfiddle.net/Hastig/QLbGc/6/

I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.

Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.

Remember to compensate for margin and padding to match the container div.

In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.

If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.

Upvotes: 0

vaskort
vaskort

Reputation: 2861

You forgot to put float:left; at the slideshow div

It should be 

#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}

So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.

Basically they were inside the parent div from the first time but the about div was under slideshow div.

Demo:

http://jsfiddle.net/QLbGc/2/

Upvotes: 1

Tal Shaked
Tal Shaked

Reputation: 154

try to put this code in your css.

.content::-webkit-scrollbar { 
     display: none; 
}

Upvotes: 0

Related Questions