1

I have a div and I want to keep an image on the right of it.

The problem is that the div is not expanding to fit the image. I gave the div a background to check that.

This is the jsfiddle http://jsfiddle.net/BJ7YZ/

very simple code

What I have tried

I checked this question

and I tried to do the same. I gave the div .header class a clear class, which is:

.clear{
    clear: both;
}

and I gave the div that contains the image, which is .logo_container this fix:

.logo_container:after, .logo_container::before {
    clear: both;
}

none of them has worked. I know the problem is because I didn't set a height to the .header, but I need to not set the height.

Community
  • 1
  • 1
Marco Dinatsoli
  • 10,322
  • 37
  • 139
  • 253

3 Answers3

3

One way of taking care of this problem is as follows:

.header{
    width: 100%;
    background-color: red;
    position: relative;
    overflow: auto;
}

Adding overflow: auto creates a new block formatting context and the floated child elements are confined within the edges of the parent container.

See: http://jsfiddle.net/audetwebdesign/zptjb/

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • +1 to your efforts, but is this `overflow:auto` better than the answer by `@Alex` ? – Marco Dinatsoli Jul 11 '14 at 14:06
  • please when I did that, a new scroll appears, how to remove it please? – Marco Dinatsoli Jul 11 '14 at 14:11
  • That is the problem with using overflow when things do actually overflow. You can use `overflow: hidden;` too, as long as you don't want anything visible outside of the content area. – Alex Jul 11 '14 at 14:12
  • @Alex `hidden` is not a good solution, what I did is removing the `top:10 and right 10` and adding `margin-top and margin-righ` to the `logo_container`, and it works – Marco Dinatsoli Jul 11 '14 at 14:13
  • 1
    Excellent question. If you use postion: relative to offset your image, you are causing the image to extend beyond the bounding box of the parent, so you see an overflow. You could add margins to the image container and get the same positioning. The scroll bar is because of the `overflow: auto`. In contrast, if you use inline-blok (solution by @Alex), you see the image jutting out but no scoll bar since the overflow is simply visible but scroll bars are not emanbled. – Marc Audet Jul 11 '14 at 14:15
  • The various proposed solutions here all have nuances even though they basically do the same thing. The best one depends on the subtleties of how you need to position and style your content. – Marc Audet Jul 11 '14 at 14:16
  • @MarcAudet in my opinion, using a `display:inline-block` is better than the `overflow` but you write @Alex, you mean @IndieRok ? – Marco Dinatsoli Jul 11 '14 at 14:17
  • Yes, misread the page... @IndieRok posted about inline-block. – Marc Audet Jul 11 '14 at 14:20
  • 1
    @MarcAudet I am sorry, I have selected `@IndieRok's` answers, I wish I could choose many answers. Many thanks for your great efforts – Marco Dinatsoli Jul 11 '14 at 14:26
  • 1
    You are very welcome, your courtesy is very much appreciated! – Marc Audet Jul 11 '14 at 14:46
2

You need to clear the container itself. The easiest way today is to use this lovely, simple, clearfix "hack". See updated fiddle

http://jsfiddle.net/BJ7YZ/2/

and

http://nicolasgallagher.com/micro-clearfix-hack/

.header:before,
.header:after {
    content: " ";
    display: table;
}

.header:after {
    clear: both;
}
Alex
  • 7,320
  • 1
  • 18
  • 31
1

Have you tried giving display: inline-block; to your header class? It seems to do the trick. I can see the red background by applying it.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
IndieRok
  • 1,778
  • 1
  • 14
  • 21
  • +1 to your efforts, but the `overflow:auto` seems to be the good answer. – Marco Dinatsoli Jul 11 '14 at 14:08
  • This also works, and so does `display: table` and `display: inline-table`, these, along with `dislay: inline-block`, also create new block-formatting contexts. – Marc Audet Jul 11 '14 at 14:11
  • @MarcAudet is this `display` better than the `overflow` pelase? i think so, right? – Marco Dinatsoli Jul 11 '14 at 14:15
  • @MarcoDinatsoli Equivalent yes, better?, depends a bit on what needs to be done. Most of the time, it depends on how well you need to support legacy browsers and so on. – Marc Audet Jul 11 '14 at 14:18
  • @MarcAudet do you imply that `inline-block` is not supported by allow browsers? – Marco Dinatsoli Jul 11 '14 at 14:20
  • @MarcoDinatsoli I was thinking of using pseudo-elements to generate clearing elements, some older browsers don't support pseudo-elements, but that is not as big an issue as it was 10 years ago. Also, early versions of IE did not support inline-blocks very well. – Marc Audet Jul 11 '14 at 14:23