Menu
I have 3 divs with float: left; first one is the title which cant be with fixed width. second is an image which is 150x150 and third is a paragraph which should spread to all available space.
Everything works great if the paragraph is short (only if it has one line it works) but if it is longer the paragraph is messed up. the second line doesnt go under the first one, and the whole paragrah goes under the title and image.
Im trying to accomplish this 
And this is the what Im getting
markup is this
<div class="row row-list">
<h3>title</h3>
<div class="container-img"><img src=""></div>
<div class="container-paragraph"><p>lorem ipsum</p></div>
</div>
in css beside styling (color, font-size..) there is only float: left; padding on container-paragraph is 50px 35px, and margin is 0;
I'm using latest bootstrap and wordpress
351
You should use bootstrap specific markup. In your case it could look like:
<div class="row row-list">
<div class="col-xs-3"><h3>title</h3></div>
<div class="col-xs-2 container-img"><img src=""> </div>
<div class="col-xs-7 container-paragraph"><p>lorem ipsum</p></div>
</div>
You can choose the col-xs(?) depending on your needs.
For more help some jsFiddle would be nice!
117
I would float the first two items and then not float the third item but set overflow:hidden on it instead which will allow it to fill the remaining space in a rectangualr block.
No dimensions needed but be aware should your title get too long it will take up the whole row so perhaps a max-width on the title would be a good idea.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.row-list {
border-bottom:1px solid #000;
background:#f9f9f9;
}
.container-img {
width:150px;
height:150px;
}
.container-img img {
display:block;
background:red;
width:100%;
height:auto;
}
.container-img, .title {
float:left;
vertical-align:top;
margin:0 10px 10px;
}
.container-paragraph {overflow:hidden}
</style>
</head>
<body>
<div class="container">
<div class="row row-list">
<h3 class="title">title</h3>
<div class="container-img"><img width="150" height="150" src="http://www.placehold.it/250x150"></div>
<div class="container-paragraph">
<p>lorem ipsum</p>
</div>
</div>
<div class="row row-list">
<h3 class="title">title with longer text</h3>
<div class="container-img"><img width="150" height="150" src="http://www.placehold.it/250x150"></div>
<div class="container-paragraph">
<p>lorem ipsum</p>
</div>
</div>
<div class="row row-list">
<h3 class="title">title</h3>
<div class="container-img"><img width="150" height="150" src="http://www.placehold.it/250x150"></div>
<div class="container-paragraph">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With