Content spilling out of banner

Question

I am learning HTML, CSS and I have problem. I want to display a banner, but the content of the banner is spilling out of the bottom of the banner. My code generates this:

I want it to look like this instead:

.

Where is problem in my code?

#banner4 {
  background-color: #e0e0e0;
  margin-left: 3.6%;
  border-left: solid;
  border-width: 7px;
  border-color: #0099FF;
  width: 92%;
  border-radius: 7px;
}
#banner4Tekst {
  padding: 30px;
  float: left;
}
#banner4Naslov {
  font-family: Times New Roman;
  font-size: 30px;
}
#banner4Podnaslov {
  font-family: Times New Roman;
  font-size: 17px;
}
#banner4BT {
  background-color: #0099FF;
  padding: 8px;
  border: none;
  border-radius: 4px;
  color: white;
  font-family: Cambria;
}
#banner4Button {
  margin-left: 55%;
  padding-top: 40px;
}

<div id="banner4">

  <div id="banner4Tekst">
    <p id="banner4Naslov">This is the fourth banner!</p>
    <p id="banner4Podnaslov">Why not try our services today, you won't regret your choice!</p>
  </div>

  <div id="banner4Button">
    <button id="banner4BT">CONTACT US TODAY</button>
  </div>

</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

In your #banner4 add float:left or display: inline-block and it will work.

#banner4 {

  display: inline-block;
  background-color: #e0e0e0;
  margin-left: 3.6%;
  border-left: solid;
  border-width: 7px;
  border-color: #0099FF;
  width: 92%;
  border-radius: 7px;
}

1) The display: inline-blockmeans:

Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

Lets take an example to understand better.

<div id="div1"> contains many paras or divs inside it <div>
<div id="div2"> contains many paras or divs inside it </div>

Now both divs have property display:inline-block, means that both of them will be aligned in the same line if the width of the browser allows it. Otherwise the div2 will simply move below the div1.

2) float property simply means where you want the containers div or p to float on the screen.

Check this answer to know more about the advantages and disadvantages of float and inline-block. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

3) clear:both makes the element drop below any floated elements that precede it in the document.

Check this answer to understand it better What is the use of style="clear:both"?

EDIT:

1) i was wrong about that divs will overlap. I have deleted that

2) After reading the above answers, I would say that using inline-block is better than using float. I have edited the answer accordingly

edited May 23 '17 at 12:09

Community

1
1

answered Jan 25 '15 at 10:48

Ankit

1,075
1
8
19

You are just moving the problem to a different part of the document. `float:left` will cause any text following this banner to try to wrap around the banner. – Sumurai8 Jan 25 '15 at 11:01
@Sumurai8 I dont understand what exactly your point is here. I want the text inside the banner to be wrapped and floated to `left`. That's why I am using a container ie `div` and wrapping all the elements inside it and making them to float left. The answer given by you is also correct ie using `div clear:both` property, however i do not get why using `float:left` is incorrect here. – Ankit Jan 25 '15 at 11:10
See [this example](http://jsfiddle.net/3smpodhp/). If you use this solution, you'll need to use clear: both at a later point to get a consistent layout. If you don't you risk that content starts wrapping around the left-floating element. If that doesn't happen, it's only because the element behind that is not small enough to fit behind it. Any change to the page, even just changing the words in some dynamic content can make the page break though. That's why I think a solution that makes the banner a block on it's own should be prefered and leave floating elements for things that need to float. – Sumurai8 Jan 25 '15 at 11:19
The same is the case by the way for left-floating elements before the banner, such as a pretty bar with share icons: http://jsfiddle.net/3smpodhp/1/ – Sumurai8 Jan 25 '15 at 11:22
I got your point, and the examples you have show make sense. However this depends on how your HTML DOM is structured. Its more about coding style and how a person likes to structure his design – Ankit Jan 25 '15 at 11:39

score 1 · Answer 2 · answered Jan 25 '15 at 10:55

Here is a JSFiddle

It is not perfect on small screens because the text of your button get's on two lines. Let me know if I need to change my code.

HTML:

<div id="banner4">
    <div id="banner4Tekst">
        <p id="banner4Naslov"> This is the fourth banner!</p>
        <p id="banner4Podnaslov">  Why not try our services today, you won't regret your choice! </p>
    </div>
    <div id="banner4Button">
        <button id="banner4BT"> CONTACT US TODAY </button>
    </div>
    <div class="clear"></div>
</div>

CSS:

#banner4{
    background-color:#e0e0e0;
    margin-left:3.6%;
    border-left: solid;
    border-width:7px;
    border-color:#0099FF;
    width:92%;
}

#banner4Tekst{
    float:left;
    width:66%;
    padding: 10px 2%;
}

#banner4Naslov{
    font-family:Times New Roman;
    font-size:30px;

}

#banner4Podnaslov{
    font-family:Times New Roman;
    font-size:17px;

}

#banner4BT{
    background-color:#0099FF;
    padding: 8px;
    border:none;
    border-radius: 4px;
    color:white;
    font-family: Cambria;

}

#banner4Button{
    float:left;
    width:30%;
}
#banner4Button button{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    font-size: 24px;
}
p{
    margin: 10px;
}
.clear{
    clear:both;
    width:100%
}

If i understand you, i will learn responsive after, i will use bootstrap. I think it is ok — Dario Vasic, Jan 25 '15 at 11:04

score 0 · Answer 3 · answered Jan 25 '15 at 10:58

The problem is that you are using float. An element with float has no height. Your banner stops when it contains all non-floating elements, which is only the button. What you can do instead is have an element after all floating elements that is forced below all elements that float left and right using clear: both;.

<div class="clearboth"></div>

.clearboth {
  clear: both;
}

#banner4 {
  background-color: #e0e0e0;
  margin-left: 3.6%;
  border-left: solid;
  border-width: 7px;
  border-color: #0099FF;
  width: 92%;
  border-radius: 7px;
}
#banner4Tekst {
  padding: 30px;
  float: left;
}
#banner4Naslov {
  font-family: Times New Roman;
  font-size: 30px;
}
#banner4Podnaslov {
  font-family: Times New Roman;
  font-size: 17px;
}
#banner4BT {
  background-color: #0099FF;
  padding: 8px;
  border: none;
  border-radius: 4px;
  color: white;
  font-family: Cambria;
}
#banner4Button {
  float: left;
  padding-left: 60px;
  padding-top: 90px;
}
.clearboth {
  clear: both;
}

<div id="banner4">

  <div id="banner4Tekst">
    <p id="banner4Naslov">This is the fourth banner!</p>
    <p id="banner4Podnaslov">Why not try our services today, you won't regret your choice!</p>
  </div>

  <div id="banner4Button">
    <button id="banner4BT">CONTACT US TODAY</button>
  </div>
  
  <div class="clearboth"></div>

</div>

Content spilling out of banner

3 Answers3