My float works...kind of..however I'm having a problem when resizing my browser. I would like the text to wrap around the div when the screen gets smaller however it's just squishing to the right in a long line of text to the bottom.
Here are some pics.
This is when it's wider
and then this is what it's doing when I resize the browser
my html kind of looks like this
<div class="info">
<div class="userInfo">
<p>info here</p>
<img>
</div>
<div class="bio">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>
and my css looks like this
.userInfo{
float: left;
}
.bio p{
padding-left: 14em;
}
You will have to move your paragraphs inside the same div as the image, and float the actual image. Something like this:http://jsfiddle.net/cLcJu/
As you can see the code is very simple:
<div class="userInfo">
<p>some content above the image</p>
<img src='path_to_image'>
<p>A bunch of content to the right of and underneath the image</p>
</div>
and the css
.userInfo img {
display: block;
float: left;
padding: 10px;
}
This should work:
HTML
<div class="info">
<div class="userInfo">
<p>info here</p>
<img src="image">
<p>paragraph</p>
</div>
</div>
CSS
.userInfo img { float: left; }
Related
When I was building a 2 columns layout and having the first items of each row floated to left, I was faced with an issue. If the element's text was much bigger than intended, the rows would break, items being pushed down, so instead of it looking like this:
it looks like this:
The code being:
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
CSS:
.layout {
list-style: none;
}
.layout > li {
vertical-align: top;
width: 49%;
}
.layout > li:nth-child(odd) {
margin-right: 1%;
float: left;
}
.layout > li:nth-child(even) {
margin-left: 1%;
float: right;
}
Which works, but if we are to make the longer, it'd break.
If we add this line:
.layout > li:nth-child(even) + li {
clear: both;
}
It works just perfectly, no matter what I throw at it.
How come?
Just use only float: left for ALL elements in your case.
.layout {
list-style: none;
}
.layout>li {
vertical-align: top;
width: 49%;
float: left;
}
.layout>li:nth-child(odd) {
margin-right: 1%;
}
.layout>li:nth-child(even) {
margin-left: 1%;
}
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
Application of clear clears out the floats for current container which would have otherwise got applied due to preceding or inherited styles.
The only layout that is now applied to these elements are their own. That's why, it works as desired.
https://developer.mozilla.org/en/docs/Web/CSS/clear
For your layout, you float box 1 to left, then box2 to left. Then, you apply clear:both because you want to stop applying floats. Then, for the next row boxes, you apply floats again because you want to place them left.
"When you apply clear:both to an element, it basically says "stop floating here" — this element and those after it in the source will not float, unless you apply a new float declaration to another element later on."
How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
I want the following:
======
=img1= Text
======
======
=img2= Some more Text
======
Current HTML:
<div id="divison-id">
<img src="images/img1.png">
<p>Text</p>
<img src="images/img2.png">
<p>Some more text</p>
</div>
When I add the following CSS rule:
#division-id p {
display: in-line
}
I get this:
====== ======
=img1= Text =img2= Some more Text
====== ======
Why is this happening and what would be the correct way to solve this?
If you can change the HTML a bit, try wrapping the <p> and <img /> inside another <div> or something like this:
#divison-id p {
display: inline;
}
<div id="divison-id">
<div>
<img src="images/img1.png">
<p>Text</p>
</div>
<div>
<img src="images/img2.png">
<p>Some more text</p>
</div>
</div>
And note, there are two errors:
There's no display: in-line.
The selector is wrong.
Try this:
Add <br> tag after each <p> tag. Like this:
<div id="divison-id">
<img src="images/img1.png"
<p>Text goes right</p><br/>
<img src="images/img2.png"
<p>Some more text</p><br/>
</div>
CSS:
#divison-id p{ display:inline; vertical-align:top}
Try this
I added <div class='item'> to wrap each image and text
<div id="division-id">
<div class='item'>
<a href="[href]">
<img src="images/img1.png">
</a>
<p>Text</p>
</div>
<div class='item'>
<a href="[href]">
<img src="images/img2.png">
</a>
<p>Some more text</p>
</div>
</div>
<style>
#division-id p {
display: inline
}
</style>
Hope it helps
I prefer to use lis instead of divs and brs, because you don't need to style anything extra.
ul {
list-style: none;
margin: 0;
}
ul li a {
display: inline-block;
float: left;
margin-right: 10px;
}
<ul id="division-id">
<li>
<img src="images/img1.png">
<p>Text</p>
</li>
<li>
<img src="images/img2.png">
<p>Some more text</p>
</li>
</ul>
#division-id p:after
{
content: '';
display: block;
clear: both;
}
you could try this. I personally suggest that you do not use float:left cuz it will limit your styling in terms of height and width.
<style type="text/css">
.division_id div, .division_id>div>p{
display:inline-block;
}
.division_id>div>a{
vertical-align:middle;
}
</style>
<html>
<div class="division_id">
<div>
<img src="images/img1.png">
<p>Text</p>
</div>
<div>
<img src="images/img2.png">
<p>Some more text</p>
</div>
</div>
</html>
This is a follow up from this question: Autofit text under image with only css
Why does the inline-block divs in this code produce extra width on the right side of the elements?
.item {
display: inline-block;
background-color: red;
}
.image-container {
background-color: blue;
display: table;
width: 1%;
}
img {
height: 120px;
}
.text-wrapper {
overflow: hidden;
}
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
Edit: This is NOT a problem with whitespace, see this jsfiddle without any whitespace and notice that the div still takes up lots of extra space (the red area): https://jsfiddle.net/2Lzo9vfc/332/
Edit2: To clarify my requirements: I have N images with varying width that I wish to layout in a "dynamic table", i.e. the images should be inline so they will automatically wrap when running out of horizontal space in parent. Where this gets tricky is that I have some text that I wish to display under each image that should wrap with the image width as well (and as I said, the image width may vary).
The red portion of the item is an artifact of the browser not knowing how to correctly size the containers. It's using the length of the text to determine the width before the table layout is applied. If you know the width of the items, you can use this simpler approach:
.item {
display: inline-block;
background-color: blue;
width: 120px;
}
.image {
display: block;
height: 120px;
}
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
I don't know off hand of a way to make the elements shrink to the smallest possible width while still containing all child elements.
I modified #Brandon Gano's second answer. I used display: table-caption; on .text-wrapper.
Here's the CSS I modified from his jsfiddle:
.text-wrapper {
overflow: hidden;
display: table-caption;
caption-side: bottom;
height: 60px; /* You may have to modify the height */
background-color: blue;
}
And the updated jsfiddle.
You're seeing whitespace added between the inline-block elements. You can remove the horizontal space between these items by removing all whitespace between the elements. e.g.:
<div>
...
</div><div>
...
</div><div>
...
</div>
Note that the closing tag is immediately followed by the next opening tag.
My problem is that I have this floated elements to the left. Every element has hidden subelement with some text. I want them to be next to each other (if there is space) like in this demo .
After I click on image then that subelement which is hidden will show up. It work fine with element which are on left side (like in demo) but I have problems with the right side. When I click on element on this side, there is plenty of white space in left side.
What can I do about it?
Here is my code:
HTML:
<div id="main">
<section>
<article class="articles">
<img src="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://theconceptartblog.com/wp-content/uploads/public_html/dev3/wp-content/uploads/07/GEARS3-imgs-05.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://blog.art21.org/wp-content/uploads/2011/08/imgs-189.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://www.klafs.com/media/klafs/imgs-700x394_49_c1_5d_64_fee67da23384276e60644482670c3f22"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtX4Yk1Sxew5RqlARZHKoSnePwp86PVCOpmfTkE9bGCL2Iffic"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://89.152.245.33/DotNetNuke/Portals/SecureChains/Images/imgs.jpg"/>
</article>
</section>
</div>
CSS:
.articles {
position: relative;
float: left;
width: 49.8046875%;;
min-height: 100px;
}
.articles img {
height: 100px;
width: 100%;
}
#main {
font-size: 0;
}
p {
margin: 0;
font-size: 16px;
}
Thanks for your advice.
You need to specify the float of every element on the ride side. You can do this by using :nth-child(even):
.article:nth-child(even) {
float: right;
}
If you want to use more complex grid systems you need some JavaScript or use the CSS flexbox property.
If you decide to use JavaScript there are several jQuery plugins available.