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...
Related
I am trying to recreate a design gotten from a UX Designer,
the design is was created for a screen size of 1440px, which is expected to be responsive across 992px, after much work trying to wrap my div around the image, this is what I get
The problem here is, is there a standard way to wrap div around the image for a perfect fit...
Below is my sample code
HTML
<div class="goal">
<div class="col-md-4 col-xs-12" style="padding: 0">
<img src="assets/images/image4.png">
</div>
<div class="goal-txt col-md-8 col-xs-12">
<h2>Vivamus quis</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus imperdiet ultrices. Proin at sagittis dolor. Nam nec ligula mi. Donec tortor purus, aliquet quis rutrum in, lobortis ut justo. Sed ultricies mauris a dignissim finibus. Curabitur feugiat, lorem eget congue suscipit, felis massa facilisis turpis, vel euismod dui turpis in odio. Aliquam ultricies pretium diam, sed ultrices odio posuere vitae. Donec commodo velit vitae nunc interdum, vitae ultrices dolor sagittis. Praesent tincidunt nibh at nisl cursus, eget commodo turpis dapibus. Fusce ac suscipit leo, at euismod velit. Curabitur consequat bibendum justo nec ultricies. Cras nec lacus eu dolor vehicula mattis. In hac habitasse platea dictumst.</p>
<ul>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
<li>Etiam libero urna, tempor non.</li>
<li>Sed vitae molestie ligula. Donec.</li>
</ul>
</div> </div>
CSS
.goal-txt {
background: #F4F7FC;
padding: 32px 78px 86px 78px;
}
The issue is because you have an image of 713px height and your text content is less height. I would say give your goal-txt of the same height as your image. So that makes:
.goal-txt {
max-height: 713px;
overflow-y: scroll;
}
For my website, I can't get my side column to extend all the way to the end of the body column without giving it a fixed max height (it's supposed to adjust according to the length of the body, which is altered either by the amount of words/content the body has and/or the wrapping of the body in a smaller screen). Please keep in mind that I have a footer at the bottom that is supposed to take up the entire width of the screen so I can't do something that makes the side column longer than anything and keep everything else on the body column.
Here is my example: https://jsfiddle.net/r7g20fvk/
Here is the code:
<style>
.sidebar_container {
float: right;
width: 70%;
max-width: 230px;
margin: 0px 20px 20px 0;
min-width: 300px;
/*I can add a min-height until the side column is long enough to reach the entire bottom rather than end after the content runs out, but it doesn't adjust accordingly (to the length of the body column, whether the screen makes the body longer or the amount of text makes the body longer)*/
}
.left {
overflow: hidden width: 70%;
line-height: 2;
font-size: 18px;
}
</style>
<div class="left">
<h2>Home</h2>
</div>
<div>
<div class="sidebar_container" style="float: right;">
<div class="sidebar">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
Read More
</p>
</div>
<div class="sidebar">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus.. Read More</p>
</div>
<div class="sidebar">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
neque, vel mattis arcu semper in...Read More</p>
</div>
<!--close sidebar-->
</div>
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper
tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero
quis odio tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu
enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris.
Nunc molestie libero quis odio tristique euismod.</p>
</div>
</div>
Is there a way to make it adjust accordingly? Perhaps make the side column's width be a percentage of the entire width of the screen so it isn't a fixed width when viewing at a smaller screen size, or make it completely disappear or something when in super-small mobile screens. I'm trying to make it mobile friendly and adjust its height based off of the bottom.
Do you think making a table (with two columns, one as body and one on the side) would be a better way of making the webpage mobile friendly and automatically adjust to the wrapping of content? Or is there a better way using div grouping?
Something like this?: https://jsfiddle.net/xcy9s64g/
The trick is to position the right child div absolutely:
position: absolute;
right: 0;
top: 0;
And, of course, positioning the parent container as relative, to provide a reference point for the absolute positioning. Then, you can use percentages for the children.
#container {
position: relative;
width: 100%;
}
Do you think making a table (with two columns, one as body and one on
the side) would be a better way of making the webpage mobile friendly
and automatically adjust to the wrapping of content? Or is there a
better way using div grouping?
Using a table for layout is a bad idea. Use flexbox instead if you want to try something different.
I think you should use flexbox, hope it solves your problem.
Please check this codepen solution
body {
background: #eee;
}
section {
padding: 10px;
}
h2 {
margin: 0;
padding: 0;
display: inline-block;
}
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.main-container {
background: #fff;
margin: 10px;
display: flex;
/*flex-wrap: wrap;*/
/*justify-content: space-between;*/
}
.left-container {
flex: 3 3 70%;
background-color: #fff;
}
.right-container {
flex: 1 1 30%;
flex-direction: column;
background-color: #ccc;
}
#media screen and (max-width:768px) {
.main-container {
display: flex;
flex-wrap: wrap;
}
.left-container {
flex: 0 1 100%;
order: 1;
/*change the order of the blocks for smaller screens as you like */
background-color: #fff;
}
.right-container {
flex: 0 1 100%;
order: 2;
/*change the order of the blocks for smaller screens as you like */
background-color: #ccc;
}
}
<body>
<div class="wrapper">
<div class="main-container">
<section class="left-container">
<h2>Home</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem neque,
vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper tincidunt
ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero quis odio
tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus
in mauris. Nunc molestie libero quis odio tristique euismod.
</p>
</section>
<section class="right-container">
<article>
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
Read More
</p>
</article>
<article>
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
Read More
</p>
</article>
<article>
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
Read More
</p>
</article>
</section>
</div>
</div>
</body>
As you can see in this jsfiddle , I have a navbar and a sticky header per div. Now if i click on my anchors I get scrolled down to the right position, but the header overlaps the text of the div.
I want the header to be positioned above the div when scrolling down, this can be accomplished by setting
.header {
margin-bottom: 40px;
}
If I do that I get an offset, which I don't want at all, as you can see here:
Margin bottom
Is there any way to accomplish avoiding the overlapping and having no margin?
Thank you in advance!
I already tried offsetting it with adding padding-top to the anchor, as suggested in answers of this question, but this did not work either (still overlapping)
Check this snippet:
.navbar {
position: fixed;
height: 40px;
background: green;
top: 0;
width: 100%;
z-index: 5;
}
.nav_holder{
position:absolute;
top:40px;
}
.content {
margin-top: 60px;
}
.one, .two, .three {
height: 1000px;
padding-top:40px;
}
.header {
position: sticky;
top: 40px;
background: white;
}
<div class="navbar">
NAVBAR
</div>
<div class="content">
<div class="nav_holder">
one
two
three
</div>
<div id="one" class="header">
header one
</div>
<div class="one">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
<div id="two" class="header">
header two
</div>
<div class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
<br/>
<div id="three" class="header">
header three
</div>
<div class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet magna ut nisl facilisis sodales. Etiam auctor ut lectus id vulputate. Nunc id scelerisque nibh. Maecenas vel aliquam quam. Suspendisse condimentum, erat sit amet rhoncus suscipit, leo justo maximus urna, eu gravida libero nisi in ante. Integer fermentum justo sit amet ligula vulputate, ac bibendum quam mollis. Nunc efficitur orci neque, sed malesuada magna congue at.
</div>
</div>
Hope it helps
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a paragraph split up as follows:
<a href="#" class="nostyle">
<p>
<span class="heading">Really long heading</span><br>
<br>
Lots of text that needs to be justified
</p>
</a>
The paragraph is set to text-align: justify, which it needs to stay at.
I want just the <span> to be text-align: left, so that large gaps don't form between rows. How can I do this?
I want to keep it all as a single paragraph, as it's part of a flex item and having a <h2> and <p> means it won't all work nicely!
Thanks.
The problem is that inline elements do not have a width and cannot be affected by text-align. To fix this, you can set the <span> to display: block and then it should display with the text aligned to the left, as shown in the snippet below.
NOTE: that I changed text-align: justify to text-align: center in the below snippet to make it easier to see.
p {
text-align: center;
}
p span {
display: block;
text-align: left;
}
<a href="#" class="nostyle">
<p>
<span class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum.</span><br>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum. Aliquam posuere purus vitae justo mollis lobortis vel vitae sapien.
Sed sapien nibh, tincidunt sed risus vel, vestibulum euismod augue. Quisque molestie vehicula magna, eget pulvinar augue pellentesque nec. Praesent venenatis risus placerat dapibus rhoncus. Aliquam lacinia, dolor non tristique congue, est nunc bibendum
erat, id varius augue turpis id ipsum.
</p>
</a>
However, I really suggest using to <p> tags here because that's what they're for. Also note that you're using two <br/> tags to separate the span from the rest of the text and <p> tags implicitly have a <br/> before and after, so switching to multiple <p> would not change the spacing. See below:
p {
text-align: center;
}
p.heading {
text-align: left;
}
<a href="#" class="nostyle">
<p class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum. Aliquam posuere purus vitae justo mollis lobortis vel vitae sapien.
Sed sapien nibh, tincidunt sed risus vel, vestibulum euismod augue. Quisque molestie vehicula magna, eget pulvinar augue pellentesque nec. Praesent venenatis risus placerat dapibus rhoncus. Aliquam lacinia, dolor non tristique congue, est nunc bibendum
erat, id varius augue turpis id ipsum.
</p>
</a>
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.