CODEWITHSUNDEEP
csshtmlcss-float
oloccina
oloccina

Reputation: 43

div borders do not respect float while div content does

I have a div A which should be aligned accordingly to "float:left" rule of another div B positioned before it

the contents of this div A are being aligned correctly, but the borders and background not, they do not respect the "float:left" rule of the other div B and just go below it

see image https://drive.google.com/file/d/0BxKs3ENJmLAtMDVUY3ZhTFZQYWM/edit?usp=sharing

I notice that if I add a "display:table" to the style of my div A this issue is being solved, but then I have another one, which seems to be cause by the "display:table" rule: the borders and background of my div are no more extended to the end of the page on the right, they just go around the content of the div

see image https://drive.google.com/file/d/0BxKs3ENJmLAtTHVZVnNPSm9FREE/edit?usp=sharing

given that this is a responsive website and I cannot use fixed width parameters for the elements, is there any css trick to solve the issue?

thank you!

Upvotes: 1

Views: 816

Answers (2)

David
David

Reputation: 64

In the 4+ years since this question was asked, Flexbox has become much more widely supported.

Using display: flex; on div A should work: https://codepen.io/davidding/pen/KxeWEP

Upvotes: 2

dkasipovic
dkasipovic

Reputation: 6120

You can try with display: inline-block or you can set margin-left on the element, which will equal the width of the element above it, so it moves away from underneath it.

Upvotes: 0

Related Questions