CODEWITHSUNDEEP
htmlcsswordpress
zkvvoob
zkvvoob

Reputation: 486

DIV not covering whole content vertically

The Wordpress theme I'm using offers a thing called Page Builder with which one can add different elements and fill them with stuff, for instance a heading, a content box, a gallery of pictures, videos, etc. Now, the problem is that if a Content box (basically something that should contain the main body of text on a page) is filled with normal text, it's ok. But when I add a shortcode for a WP plugin, the output of the plugin is fine, but the div.blog-box which is supposed to provide the background of this content, does not actually appear.

Compare the two screenshots: the first one is text-only, the second one contains an output of a plugin shortcode.

Screenshot 1 Screenshot 2

.blog-box {
padding: 10px 20px;
background: #fff;
margin-bottom: 20px;
position: relative;
max-width: 1170px;
background: #333333;}

These are the styles that apply to the div. Can anyone help me find the reason for this behaviour?

Upvotes: 0

Views: 1737

Answers (2)

Marventus
Marventus

Reputation: 874

Based on what you described, it seems the element your plugin is outputting must be floated with CSS (ie, float:left), because otherwise the .blog-box div should be taking the height of its children with the styles you have shared. Try unfloating that child element see if it works:

.child-element {
    float:none;
}

Replace child-element with the CSS class of that element.

Upvotes: 0

Delphin Sam
Delphin Sam

Reputation: 142

try to use overflow:hidden;

.blog-box {
padding: 10px 20px;
background: #fff;
margin-bottom: 20px;
position: relative;
max-width: 1170px;
background: #333333;
overflow:hidden;}

Upvotes: 2

Related Questions