CSS overlapping error

Question

I have a <div> called big box that contains another <div> called small box. Each small box contains an image and text wrapped inside a separate <div> I also have a diagram to explain my situation.

http://s21.postimg.org/4thwzlt9j/Untitled.jpg

The problem is when the text is larger than the div wrapping it. If I create another small box, It will overlap the above small box.

How can I modify the CSS so if the elements such as the text go over the <div> the small box won't overlap it.

http://s18.postimg.org/kqkqlp6w9/Untitled.png

I don't want to use margin because it is fixed. What happens if one small box has only 3 words of text and there's a huge margin at the bottom?

How can I make it dynamically, so if the text is bit over, the second small box won't overlap it but will instead adjust it's size so it will be at the bottom with space?

  .bigbox {height: 700px;  
  width: 950px; 
  background:#FFFFFF;
  border-style:solid;
  border-color:#D5DADA;
  border-width:1px;}

 .smallbox {text-align:center;
  height:300px;
  width:250px;
  background: #FFB236;
  position:relative;
  left:0px;top:0px;
  margin-bottom: px;}

 .imagebox img{margin:6px 6px;
  padding-top:10px;
  padding-bottom:10px;
  padding-right:10px;
  padding-left:10px;}

My HTML

<div class="bigbox">
<div class="smallbox"><div class="i"><img border="0"src="im.jpg" alt="">  </div>This is the text and it is wrapped inside a div.  </div>
<div class="smallbox"><div class="imagebox"><img border="0"src="im.jpg" alt="">  </div>This is the text and it is wrapped inside a div.</div>

@CL75 Thank for the edit . It's make this question much more cleaner — JackRoster
– JackRoster, Commented Apr 8, 2013 at 4:27
No problem, backticks were missing from the references to your <div> tags in the opening paragraph so it threw me off :) But in the future just add those backticks and you should be good to go. — vtacreative
– vtacreative, Commented Apr 8, 2013 at 4:31

Albert Xing · Accepted Answer · 2013-04-08 04:27:28Z

2

Simply removing the height attribute of the .smallbox worked for me. The problem with specifying a fixed height is that it simply does not allow the div to expand such that all the content fits inside.

If there is more content than what the div can hold, it overflows. The overflow can be visible or hidden depending on how you specify it, but it does not change the layout and does not act as content.

http://jsfiddle.net/wtBUd/

answered Apr 8, 2013 at 4:27

Albert Xing

5,7883 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS overlapping error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related