I have an image, that I want to be aligned to one side of a div. I also have paragraphs that need to go alongside this image. However, they do not have enough text content to reach all the way down the height of the image. The content beneath the paragraphs I have needs to be below the image.
Using float:left for the image does not work, since the container div for the image with the desired alongside paragraphs does not respond to the height of floated elements.
Using position:relative; left:0px for the image also does not work. With this, I have tinkered with the display of the paragraphs, but they always go beneath the image instead of beside.
h3 {text-align:center}
img {position:relative;left:0px}
p {display:inline-block;}
<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
</body>
Here is the Fiddle.
EDIT
After reviewing these answers, I found a more elegant solution:
h3 {clear:both; text-align:center}
img {float:left; margin-right:10px}
This takes the idea of clear fix and makes it more readily-applicable.
Remove inline-block (so they default to block) from your p tags and then put your float:left; back in to your img tags. Also add float:left; and clear:left to the div tag so they always flow under one another.
https://jsfiddle.net/bowp6aea/3/
div {float:left;clear:left;}
h3 {text-align:center}
img {float:left;}
<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
<p>
Vivamus auctor tortor sit amet ipsum volutpat, eu malesuada lorem euismod. Duis nec placerat nibh, vehicula gravida purus. Cras facilisis dictum elit vel gravida. Phasellus egestas eu mi nec cursus. Integer eget dui nibh. Nunc porta in tortor quis ullamcorper. Nulla tristique imperdiet ligula, vel dictum risus scelerisque sit amet. Phasellus elit metus, gravida vitae risus ut, faucibus vulputate mauris. Praesent eget magna sit amet sem bibendum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, ante sit amet elementum auctor, nulla mi iaculis tellus, et mattis nisi purus vitae sem. Vestibulum sit amet quam eget arcu congue commodo sit amet sit amet dui.
</p>
</div>
<div>
<h3>Another Header</h3>
<p>
Phasellus tincidunt enim ex, a dapibus nunc ultricies vitae. Integer interdum enim quis elit gravida auctor. Etiam non ullamcorper orci, eget luctus eros. Quisque posuere neque pretium urna accumsan, ac pellentesque erat dignissim. Maecenas at mi sapien. Proin lacus mauris, imperdiet bibendum orci sed, placerat ornare ipsum. Vivamus luctus quam id orci scelerisque, sed lobortis tellus finibus. Nam et eros sed arcu tristique tempus.
</p>
</div>
</div>
</body>
Updated the HTML as for in the demo, and apply these CSS class:
h3 {text-align:center; clear:both;}
img {float:left}
.inner-wrap p {display:inline;}
what about using the attribute clear:both ? you just need to insert a simple <div class="clear"></div> and give it clear:both in CSS
.clear {
clear: both
}
h3 {
text-align: center
}
img {
float: left;
margin-right: 10px /*demo */
}
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png" />
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
<div class="clear"></div>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
For simple image alignment with floating text you can use align="left within the image.
<p>
<img align="left" src="http://www.devtano.com/software/eco/images/console.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
Fiddle here.
Try using on the container div:
display: inline-block;
Or you can float all the elements to the left:
float: left;
Related
This question already has answers here:
What is a clearfix?
(10 answers)
Closed 1 year ago.
I wanted to have some text and an image to be displayed in way that the text is at the left and after it follows an image. Like in blogs. So first I made a <div> tag as an container for the text and image. Then I used a <p> tag to enter text and image. I set the float property of the image float:right.
Now i got the the text and image in blog like form just the way I wanted.
But i also wanted to add borders to the whole content. So that it looks like the text and image are in a box.
But the border are not able to cover the image's height and width.
<html>
<head>
<title>Float</title>
</head>
<style>
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
</p>
</div>
</body>
</html>
You need to add display: flex; to the div:
<html>
<head>
<title>Float</title>
</head>
<style>
div {
display: flex;
border: 5px solid blue;
}
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
</p>
</div>
</body>
</html>
I have the following html...
<div class="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus nisi. Sed blandit, nunc eget ornare porta, lorem est cursus eros, in ultricies enim mi eget leo. Integer a odio at neque lobortis fermentum ac at purus. Vivamus faucibus nec tortor at sagittis. Nam lectus metus, scelerisque vehicula orci ac, lacinia elementum lorem. Nam efficitur mauris quis tortor efficitur, vitae viverra metus semper. Nunc id euismod purus.
<div class="container">
<div class="box1">
Box 1 Content
</div>
<div class="box2">
Box 2 Content
</div>
<div class="box3">
Box 3 Content
</div>
</div>
</div>
<footer>
This is the footer
</footer>
.container{position:relative;}
.box1{position:absolute;top:0;background:red;color:white;}
.box2{position:absolute;top:20px;background:green;color:white}
.box3{position:absolute;top:40px;background:blue;color:white;}
https://jsfiddle.net/25w7cxv1/
For some reason the footer isn't displaying correctly and is being overlapped by the rest of the content. What am I doing wrong?
By giving each .box a position:absolute, you are taking them OUT of the document flow and then positioning them absolutely compared to their positioned parent (or ancestor).
<footer> is still in the document flow, and so will appear directly after the text in .maincontent.
Here I have removed position:absolute so that the boxes remain inline within the document:
.container{position:relative;}
.box1{background:red;color:white;}
.box2{background:green;color:white}
.box3{background:blue;color:white;}
And here I have given the boxes a property of display: table so that they are only as wide as their contents:
.box1, .box2, .box3 {display: table;}
I think this does what you were trying to achieve.
Fiddle: https://jsfiddle.net/gmncpn82/
I am making a personal page using bootstrap and want to use a blockquote element, however on just the left hand side I get a white line that will not go away even when I wrap the element in multiple divs and try to overwrite whatever border or margin issue that is preventing it from having the same background color. Could someone help me figure out what to do?
HTML
<div class="top-info">
<div class="row">
<div class="col-md-4"><img src="http://www.psdgraphics.com/file/male-silhouette.jpg" width="300" height="250" ></div>
<div class="col-md-8">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida velit sit amet dolor iaculis, nec semper felis dictum. Vestibulum commodo magna sed enim elementum, in euismod purus molestie. Nulla et nisl sit amet ipsum eleifend facilisis et a nisi. Cras lectus arcu, efficitur ac dictum vel, porttitor lobortis purus. Phasellus tincidunt velit eget ipsum aliquam, non egestas tellus consequat. Curabitur ullamcorper, massa et consequat mollis, metus neque rhoncus felis, eget condimentum lacus elit ac lacus. Pellentesque volutpat euismod neque, nec semper nisl interdum ac. </p>
</blockquote>
</div>
</div>
</div>
CSS:
.top-info{
background-color:#848484;
margin:0;
padding:0;
}
blockquote{
background-color:#848484;
padding:none;
margin:none;
}
Bootstrap uses border-left property to set this "white line" on the left. So all you need to do is to reset it with your custom CSS styles, for example like this:
blockquote {
border-left: 0;
}
Bootstrap by default use border-left in the blockquote element. Setting to none will remove the border.
CSS
blockquote {
border-left: none;
}
I have an paragraph and an image (See Example in CodePen):
<div>
<p>
Lorem ipsum dolor sit amet ...
<img src="http://placehold.it/200x200"/>
</p>
</div>
And the following CSS:
div {
margin: 0 auto;
width: 60%;
}
img {
float: right;
padding: 20px;
}
How can I wrap he text around the image?
I tried float:right but this does not seem to work.
Place the image before the text:
<div><img src="http://placehold.it/200x200"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim. Donec et scelerisque nisl, nec luctus massa. Nullam ut laoreet sem. Sed ligula elit, auctor et sagittis facilisis, auctor in nulla. Nulla suscipit dignissim feugiat. Vivamus lacinia tellus elit, non bibendum purus tempus eget. Sed porttitor accumsan lacus, at aliquam nisi rutrum nec. Donec a dignissim tortor. Curabitur blandit non turpis tristique tincidunt. Sed dictum sem id sem lacinia mattis. Quisque pellentesque, sem sit amet auctor congue, enim lorem egestas nisi, sit amet accumsan turpis turpis et metus. Mauris pulvinar luctus felis, in feugiat dui vulputate ac. Sed faucibus libero nulla, placerat accumsan elit rutrum et. Maecenas id enim quis turpis pretium sollicitudin.
</p>
</div>
codepen example
You're using float correctly with the image, but since in your original example the image is coming after the text, you don't notice the effect. By moving the image before the text, it gets floated to the right, and the text that comes after it is then allowed to float up alongside it.
put the image at the top
<img src="http://placehold.it/200x200"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec eros enim...
I have an HTML structure like this:
<div>
<div style="position:relative;">
<div style="position:absolute;float:left;top:0;left:0;width:50px;">57</div>
<div style="width:550px;position:absolute;float:left;top:0;left:50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
As you can see from THIS FIDDLE, My Lorem Ipsum text overlaps with my paragraph. I tried putting somme <br /> between my div and my paragraph, but they still overlap. I want my paragraph to appear after my text. Any help please?
Thank you
You don't use position:absolute with a float. You can just use the float in this case and get rid of position and the related css.
Just this would be fine:
<div>
<div style="position:relative;">
<div style="float:left;width:50px;">57</div>
<div style="width:550px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
Though, as the comments suggest - you should put this in a stylesheet and avoid inline declarations. It's cleaner and tends to be easier to maintain.
Remove your position absolute and put clear: both to your paragraph to reset the floating elements
<div>
<div style="position:relative;">
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;left:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec im.</div>
</div>
<p style="clear: both;margin-left:40px">This is my paragraph</p>
</div>
Live exemple here
If you are using floats why are you mixing it with absolute positions?
I've changed this a little.
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;margin-left:40px;">
Try this one. By the way, I've added clearfix method too, as it is recommended to clear floating spaces when you are not floating anything anymore.
If you don't want them, you can remove the div with .clearfix and the CSS.
Here you go.
Looks like you've got the unholy duo of absolute positioning and float:left without a "clear". This means your first child div with those two children will have no height whatsoever. I recommend removing position:absolute and float:left from these divs, using instead:
display:inline-block;
vertical-align:top;
This will allow them to flow left -> right and have a height within the page flow.