CODEWITHSUNDEEP
css-floatcss
Aurélien Grimpard
Aurélien Grimpard

Reputation: 964

inline-block goes under floated div

I'm trying to style my headings with display:inline-block; but i've a problem with a behavior of the property.

Jsfiddle : http://jsfiddle.net/Tu2GU/

See the titles, when a title has a long text, the heading goes under the floated div. I want the heading to break and then display 2 lines (or more) and stay on the left of the floated div, not under it.

Can't find anything helping, thanks !

edit : i updated the jsfiddle : http://jsfiddle.net/Tu2GU/13/ (removed % width for the floated div)

I don't want to have 2 divs side by side, the floated div on the right is meant to be right there, like a page summary giving link inside the page.

Also, heading are under the floated div (in html code) not over.

Upvotes: 0

Views: 382

Answers (5)

Zach Saucier
Zach Saucier

Reputation: 26034

Since the right list uses a percent width, you can set a max-width with a percent width

h2 {
    ... Your original CSS ...
    max-width:calc(75% - 40px); /* 40px comes from horizontal padding */
}

Demo

I'd recommend using a class to apply to each header instead of using the same max-width on each h1, h2, etc, but that's just personal preference

If the width of the right floated div is set, use calc(100% - 440px) or whatever the left horizontal padding + right width is

Upvotes: 1

Matthew R.
Matthew R.

Reputation: 4350

You have a few options. You can float the heading to the left so that it will slide up - you will have to set a width, though. 

h2 { 
    float: left; 
    width: 80%;
}

Another option would be to set a max width. Since inline-block elements are technically block level, you can supply a width without breaking anything. You could try this:

h2 {
    max-width: 80%
}

Yet another option would be to make the element inline. This will let the browser determine the best fit for the header. 

h2 {
    display: inline;
}

This will make the header wrap around the list and you may get the results you want. This method will make height and width parameters not work, so you will have to substitute those for line-height and padding

Upvotes: 0

AfromanJ
AfromanJ

Reputation: 3932

Create a float: left; container using the CSS below:

.lfloat {
    float: left;
    width: 75%;
 }

You just have to wrap your text in a new div:

<div class="lfloat">
    <!-- content -->
</div>

Demo

This will contain the content to the left and keep your sidebar to the right.

Note: You must clear your floats with clear: both;.

Upvotes: 1

Gregory
Gregory

Reputation: 1188

updated your Jsfiddle: http://jsfiddle.net/Tu2GU/12/ Main thing was a wrapping div around your h1 and p tag alongside of display:inline-block and vertical-align:top Is this what you needed?

Upvotes: 0

RichTea
RichTea

Reputation: 1435

Why not try floating the elements on the left instead of using inline-block?

* {
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    font-size: 1em;
}
.rfloat {
    float: right;
    width: 25%;
    background: #9C3;
    color: #111;
}
h1 {
    float: left;
    margin: 0;
    padding: 10px 5%;
    background: #06C;
    color: #FFF;
}
h2 {
    float: left;
    margin: 0;
    padding: 10px 5%;
    background: #F33;
    color: #FFF;
    width:65%;
}

http://jsfiddle.net/g4Grv/

Upvotes: 0

Related Questions