CODEWITHSUNDEEP
htmlcss
R.P
R.P

Reputation: 500

How to make div not overlap another div inside parent div

So basically I have mainDiv, which is pretty much size of body. In mainDiv there are 2 divs which are supposed to be next to each other and they are until resize or mobile device comes in. Problem is that second div completely overlaps first one.

Desired outcome http://img17.imageshack.us/img17/473/yn9x.jpg

#mainDiv { 
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    position:relative;
    border: 1px solid red;
    float: left;
}

Rest of code: http://jsfiddle.net/fDELs/2/

Right now I have js workaround solution, which checks the width and position of first div and sets 'left' property of second one, but I would love to do it in CSS.

Upvotes: 2

Views: 76968

Answers (5)

goon303
goon303

Reputation: 11

This is an old post, I know, but people are still viewing it when they search for this same issue on Google.... cause that's how I landed here, and none of the solutions given worked for me.

For those of you who were looking for a solution to the same problem I was (getting divs to sit side by side without overlapping each other) then my post is for you. I don't know if this was the answer to the original poster though but it might be close?

I was trying to get 3 div's to sit side by side. What did it for me was giving each class for each div, their own "float:left;" attribute. So all three div's need to float left. I also had to set the widths so they would not push each other down (your width's should add up to a total of 100% or less) and I set the heights the same for each, 100px although heights could vary I think. Another thing, probably you should set the background-size to contain and background-repeat to no-repeat. You can set the background-position however you like. 

.image1Div{
	background-image:url(images/image1.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:32%;
	height:100px;
	float:left;
}

.image2Div {
	background-image:url(images/image2.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:32%;
	height:100px;
	float:left;
}

.imgage3Div{
	background-image:url(images/image3.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:32%;
	height:100px;
	float:left;
}

Basically, from what I can tell, the float left attribute tells the object to float to the left of the object next to it. Since each object is sitting to the left of another, and you also don't want them overlapping, just adding float:left seems to work. As for making sizes match, or two halves of an image match, that has more to do with your photo editing than anything else I think, because you'll need the heights to be exactly the same for both images and then your width's need to be the correct ratios as well. Yeah, you might be looking to do some magic with CSS.... but I can't picture it working if you're going for a site that is responsive to different browsers on different screen sizes.... Also, I wasn't able to see the picture example you posted. It seems to have been taken down.

ANYWAY, like I said, this is for those of you who googled "how to make my div's not overlap" or something like that, and ended up at this post.... So I hope this helps somebody. Google failed me again....

Ah, sorry, I just realized you were trying to get them to work inside a parent DIV, but actually, this does work inside a parent DIV. You just need to make sure the parent DIV has a matching height to the other divs you want to fit inside it.

Upvotes: 1

Mohammad Javad Naderi
Mohammad Javad Naderi

Reputation: 506

Try this:

http://jsfiddle.net/bSK6p/1/

Resize the window and see what happens.

#mainDiv { 
    border: 1px solid black;
}

#mainDiv div {
    border: 1px solid red;
}

@media screen and (min-width:300px){
    #mainDiv { 
        height: 670px;
        display: flex;
        display: -webkit-flex;
    }

    #first {
        -webkit-flex: none;
        flex: none;
    }

    #second {
        -webkit-flex: 1;
        flex: 1;
        height: 400px;
    }
}

Upvotes: 2

DrCord
DrCord

Reputation: 3955

So the answer has little to do with what you posted here and can only be ascertianed by looking at your complete fiddle.

The problem is that you have a both interior divs being relatively positioned from the same point. The div full of content is only pushed down a bit and the one with almost no content is pushed down into the middle of that.

#first {
    top: 170px;
}

#second { 
    height: 400px;
    top: 65px;
}

Upvotes: 0

Morpheus
Morpheus

Reputation: 9055

Remove position: relative and top values from divs, and use margin-top instead.

#mainDiv {
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    border: 1px solid red;
    float: left;
}

#first {
    margin-top: 170px;
}

#second {
    height: 400px;
    margin-top: 65px;
}

Updated fiddle

Upvotes: 6

Raymond
Raymond

Reputation: 44

Removing position:relative from #mainDiv div seems to do the trick 

#mainDiv div {
    border: 1px solid red;
    float: left;
}

http://jsfiddle.net/fDELs/4/

Upvotes: 0

Related Questions