CODEWITHSUNDEEP
htmlcss
Locket
Locket

Reputation: 13

Why is my second div on the same line ignoring margin-right?

After searching through questions, I've managed to get my two div on the same line all the time. But now, my second div refuses to follow the margin-right rules of the parent div. So I added it to the div itself and it still ignores it. I thought it was the text, but it doesn't seem to matter. I've tried removing the width for the second div, which sort of works, but then it's too bunched up. Basically, I want my div's to scale with the size of the browser, I'm using percentages for the two div, but the right div refuses to shrink past a certain point. overflow:hidden also seems to have no effect.

Here is the page I'm trying to make. project

Parent div:

.split {
    margin: 0px 75px 15px 75px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

And child divs:

#pow {
    width: 50%;
    display: inline-block;
    margin-right: 15px;
}

#foundhome {
    width: 38%;
    display: inline-block;
    position: absolute;
    margin-left: 0;
}

Edit: After looking at my stuff again, it seems I may have made a mistake somewhere. Though the answer given does work to some degree. I'm gonna slowly re-add pieces to see where I went wrong.

Upvotes: 1

Views: 677

Answers (1)

Ieuan Stanley
Ieuan Stanley

Reputation: 1258

Have a look at this tutorial on the Box Model in CSS.

Essentially, the problem you are having is because the width attribute refers to the content width of the element. It doesn't take into account margins, padding or borders, so when you add these values you have to account for this in the width you are setting.

If you think this sucks and you want to take the whole box model into account when setting the width, there are instructions Here on how you can use the box-sizing CSS3 setting to include padding and border as part of the overall width, but it doesn't work with margin which is always counted on top of the width of the element (because it describes the area around the element that should be kept clear).

Upvotes: 4

Related Questions