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.
Related
Given this HTML
<div class="flex">
<div>
<img src="https://via.placeholder.com/300x300" alt="">
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
</div>
</div>
how can I make the image height scale automatically with the text div, according to browser width and font size of the text?
https://jsfiddle.net/msuL6pvx/ In this case the image has to be scaled down to have the same height as the text
https://jsfiddle.net/msuL6pvx/1/ In this case the image has to be enlarged to its max size (300x300) and not exceed those dimensions
I dont' think this is possible with pure CSS. The only think I could think of is using position: absolute for <img> to take it out of the flow in combination with max-height; then adjusting the margin of the text with javascript.
https://jsfiddle.net/zphb0fLd/
Hope it's useful.
Well as far as my knowledge, the image size can be increased with relative to text size, but its opposite case is not possible.
Here is my code. I use the flexbox to increase the height of the image as per text size. Let me know if it meets your requirements.
<div class="flex">
<div class="image-container">
<img src="https://via.placeholder.com/300x300" alt="">
</div>
<div class="text-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
</p>
</div>
</div>
.flex{
display:flex;
flex-wrap:wrap;
}
.image-container{
flex:1;
}
.text-container{
flex:3;
}
.text-container p{
font-size:2em;
padding:10px;
}
.image-container img{
width:100%;
height:100%;
object-fit:cover;
}
Live example link: https://codepen.io/pranaysharma995/pen/JjdQWyQ
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 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;
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 need to have a floated element after the content/text that's supposed to flow around it in my code for SEO reasons. Usually floats are done like so:
CSS:
#menu {
float: right;
width: 180px;
padding: 10px;
background: #fcc;
margin: 0 0 15px 15px;
}
HTML:
<div id="menu">This is a right float. The long text flows around it.</div>
<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra.
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at,
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec,
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet,
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut,
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis
a nibh. Integer ipsum. Vestibulum lacus diam, varius in,
blandit non, viverra sit amet, sapien. Sed porta sollicitudin
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>
But I need to have the HTML like this:
<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra.
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at,
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec,
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet,
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut,
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis
a nibh. Integer ipsum. Vestibulum lacus diam, varius in,
blandit non, viverra sit amet, sapien. Sed porta sollicitudin
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>
<p id="menu">This is a right float. Because it's placed below the text in code,
it also appears that way.</p>
Basically, I need this HTML to look like the previous example (HTML and CSS). How can I do this?
The width of the floated element is constant, but the height can change. The content has to flow around it. The reason I need to have it this way is because the floated element is the menu, which doesn't contain any important text and is usually the same for many pages, so the content should be topmost in the code.
This recent question may be the same
Wrap text around right floated column where left column appears first in html
the solution involves floating a empty "spacer" div right , this spacer is first in source, it should have the width and height of the content to be in the right side - in the link a solution including a bit of jQuery to get the height - the position the actual menu over the top of the floated spacer
a JS fiddle example produced from that link : HERE
Simple you have add the following css
#content {
float: left;
width: 300px; /* put here the width you want */
}
demo: http://jsfiddle.net/qTDLr/1/
Edit: make sure that the sum of #content and #menu width is less than the container width.
You could just use a table. This 'sidebar before content' problem of CSS has been a huge step backwards in terms of accessibility.