1

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.

Locket
  • 13
  • 4
  • Please add some code to your question – Andy Holmes Jan 04 '16 at 10:24
  • I understand what you're trying to achieve but unfortunately the way you set up all the DIVs is not the proper way. It's not technically wrong, but it's a bad practice. The proper way to set up layout is by using floats. Here's a video to help you understand better about float https://www.youtube.com/watch?v=AyrQR7SxAq8 – Fahmi Jan 04 '16 at 11:14
  • I had them as floats before figuring out how to keep them on the same line, but I don't like how they act. Why would it be bad practice to not use floats? And what's wrong with my other divs? – Locket Jan 06 '16 at 04:25

1 Answers1

4

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

Community
  • 1
  • 1
Ieuan Stanley
  • 1,248
  • 8
  • 20
  • So, if I have the right percentages for the widths, it will stay they same regardless of how the browser changes? I've seen that stuff before, but I was never sure what it did, so I might give it a try. Also, is how I have it not an ideal way? Would it really be better to use floats? – Locket Jan 04 '16 at 12:58
  • If you have say, `width: 50%`, the *content area* of the element will take up 50% of the screen width. The **Total Area** taken up by the element will be 50% + any margin you have + any border you have + any padding you have. In the case of your link, because you have a left and right margin of `75px`, the total width will be `50% + 150px`. Mixtures of px values and % values can lead to undesired behaviour at extremes (consider the situation where your screen width is 300px, say), but it only has to be as flexible as you need it to be: don't make it complicated when you don't need to. – Ieuan Stanley Jan 04 '16 at 13:38
  • With regards to "better", "ideal", and whether to use `float` see [This](http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css). It's always relative, and it always depends on exactly what you're trying to do. – Ieuan Stanley Jan 04 '16 at 13:39