area won't move down even without margin-top and

Question

Im trying to get descriptions next to a 485 wide picture, I did it on my ways, but when trying to add a new line with the same picture and description something like this:

_{(source: gyazo.com)}

But when I copy and paste the exact same line of code and add margin-top to that div, or even <br /> it won't make any space between them, that's how it is looking now:

_{(source: gyazo.com)}

What is causing that? very interesting..

I am using twitter bootstrap framework. Code:

<body>
<div class="container">
  <div class="works">
  <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
     </div>
<br />
       <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
     </div>
    
  </div>
</div>
<br />
</body>

CSS

.name-col {
color: #d3d3d3;
}

.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}


.field2 {
margin-top: 50px;
}

.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}

.tag_webdesign {
  background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}

.work1 {
float: left;
}

Live preview:

http://justxp.plutohost.net/themetheory/portfolio.html

What is causing that problem?

Thanks

score 2 · Accepted Answer · answered Nov 01 '12 at 14:50

2

Add this rule to your CSS

.field1 {
    margin-bottom: 30px;
    overflow: hidden;
}

This will clear the floated elements in your .field1 container and apply a margin of 30px to its bottom.

answered Nov 01 '12 at 14:50

Zoltan Toth

46,981
12
120
134

@JosephMarikle sorry, what do you mean? `auto` where? – Zoltan Toth Nov 01 '12 at 14:55
@ZoltanToth `overflow:auto` to clear the float. I thought that was the more common way to do it, but you chose to use `hidden`. Is there a particular reason? – Joseph Marikle Nov 01 '12 at 15:00
@JosephMarikle I see.. However I always thought that the `overflow: hidden` is more common :) Nonetheless the `auto` works just as well – Zoltan Toth Nov 01 '12 at 15:15

score 0 · Answer 2 · answered Nov 01 '12 at 14:51

Find the end </div> that pairs with the <div class="works">

Add above that end </div>:

<div style="clear:both"></div>

Should look like this.................

<body>
<div class="container">
  <div class="works">
  <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
         <div style="clear:both></div> //MY ADDITION
     </div>
<br />
       <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
         <div style="clear:both></div> //MY ADDITION
     </div>

  </div>
</div>
<br />
</body>

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

What you want to do is use a clearfix solution on your .field1 divs: https://stackoverflow.com/a/1633170/1778054

In essence, add this to your CSS:

/* For modern browsers */
.field1:before,
.field1:after {
    content:"";
    display:table;
}
.field1:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
    zoom:1;
}

edited May 23 '17 at 12:01

Community

1
1

answered Nov 01 '12 at 14:51

Aaron Fowler

474
1
3
8

score 0 · Answer 4 · answered Nov 01 '12 at 14:51

0

If you take the float:left; off the .examplefloat (used on the images) class it will fix the margin issue.

answered Nov 01 '12 at 14:51

munnster79

578
3
16

area won't move down even without margin-top and

4 Answers4