If i do:
<img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA
It doesn't work because text goes down to the image when the image height stops. I mean:
it would do this:
http://img8.imageshack.us/img8/9379/senzatitolo1yt.jpg
While what i want to get is:
http://img28.imageshack.us/img28/606/senzatitolo2rd.jpg
I could use old good table (<td>img</td><td>text</td>) but in 2011 that doesnt' seem the way to go :)
Any easy cross-browser trick to do that?
Edit: I can't know the image-width
Thanks!
Use two div tags, float them both to left. Give a width of 30% to one of them and 70% to the other. Put the image in the first one, text in the second one.
Given the simplistic html:
<img src="path/to/img.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui odio, luctus ut viverra vitae, dignissim a mauris. Vestibulum vel massa at sapien tincidunt venenatis id sed purus. Ut quam libero, mollis a ullamcorper sed, gravida id ligula. Sed nec augue enim. Phasellus accumsan aliquet erat interdum ullamcorper. Cras tellus libero, tincidunt non placerat interdum, venenatis id arcu. Nulla facilisi. Maecenas malesuada vestibulum venenatis. Nam vel tellus arcu. Sed non dui urna. Proin fermentum aliquet lectus non fermentum. Donec aliquet purus et tortor lobortis gravida. Duis vehicula ligula nec enim consequat ut tempor diam molestie. Aenean egestas eros sem. Phasellus ullamcorper pretium nunc molestie luctus. Mauris semper ultricies nulla, at tempus purus eleifend vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac est nunc.</p>
The following CSS works:
p {
margin-left: 100px; /* width of image plus some padding for white-space */
}
img {
float: left;
width: 90px;
height: 90px;
}
JS Fiddle demo.
Surprisingly enough the following works, albeit only tested on Chromium 8/Ubuntu 10.10:
img {
width: 100px;
height: 100px;
background-color: #f90;
float: left;
margin: 0 10px 100% 0;
}
JS Fiddle demo (ignore the colours, they were just so's I could see where things were sitting).
Second (post-edit) JS Fiddle demo, featuring an img with non-specified dimensions.
There are multiple ways to realize that.
1) two divs. assign to both a width. float the image-div to the left, the text-div to the right.
2) use margins!
give it a shot and give me feedback.
Related
How to align a text box, left or right of the HTML page?
We all know how to align a picture to the right. But how do I create a textbox (with a border and a different background color) and how do I integrate this textbox into a paragraph so that the body text skirts the textbox with a specific padding?
We all know how to align a picture to the right.
The above is a little presumptuous.
I'd agree that your question needs examples of what you've tried. It also needs clarity around what you are asking for. I'm assuming that the code below is what you are after.
This example uses floats which will cause the wrapping effect that you mention, however for layout similar to this, I would take a good look at CSS Grid.
section {
width: 600px;
height: auto;
}
p {
display: block;
}
#funky {
background: pink;
padding: 1rem;
margin-left: 1rem;
border: 3px dashed;
width: 200px;
height: 150px;
overflow-y: scroll;
float: right;
display: inline;
}
<section>
<p id="main">
<div id="funky">
Aliquam erat volutpat. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer
</div>
Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Nam at tortor in tellus interdum sagittis. Morbi vestibulum volutpat enim. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Sed in libero ut nibh placerat accumsan. jfdkjfd fdsjlfdsj Aliquam lobortis. Vivamus consectetuer hendrerit lacus. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.
</p>
</section>
Use a div and assign float: left or right to it (same as with floated images), plus a width setting to not have it span the whole page (percentage or px)
In CSS, how do I,
1) use an :after pseudo element to successfully insert,
2) a background:url image after some text,
3) that is always centred whenever viewed on a wide large screen or tall small screen?
(Example images below.)
I’ve tried different things with the code below, but it always aligns the image with the left side of the text, instead of remaining centred as the screen size changes.
Appreciate some help please.
Code
div:after {
content: '';
background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg");
width: 1200px;
height: 474px;
display: block;
}
Images
Not correct.
This is the current result with above code.
Correct.
Expected result with centre aligned image on wide large screen.
Correct.
Expected result with centre aligned image on tall small screen.
I was able to achieve your desired result by putting the text within a p > span tag, and applying the :after element to the outer p. Then, I gave the span element a max-width and centered it, so that the image appears to overflow the span container. See my solution:
p:first-of-type:after {
content: '';
background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg");
width: 1200px;
height: 474px;
display: block;
max-width: 100%;
margin: 10px 0;
}
span {
display: block;
max-width: 70%;
margin: 0 auto;
}
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ipsum eget elit egestas ultrices. Sed dui mauris, efficitur sit amet malesuada at, dictum quis elit. Pellentesque ac placerat ante. Nulla augue arcu, blandit quis nulla vitae, posuere gravida neque. Aenean leo erat, porttitor maximus nunc non, mollis ultrices dui. Maecenas consectetur eleifend ligula, quis rutrum leo suscipit id. Morbi pulvinar et est sit amet lacinia.</span></p>
<p><span>Nulla vitae magna at mi tempus cursus. Vestibulum purus purus, facilisis a lectus ac, gravida porta tellus. Integer auctor justo at tempus ultricies. Mauris ut eleifend nibh. Nullam fermentum dui in sem congue semper. Quisque eget pharetra enim. Aliquam erat volutpat. Donec nec fringilla augue, sed blandit neque. Aliquam sollicitudin, ante id accumsan fermentum, urna turpis lacinia metus, a ullamcorper enim velit vitae diam.</span></p>
I have a fixed top div with variable height. All I need is to push the bottom contents below the fixed div to re-position itself as the height of the fixed div changes in various pages.
P.S. I'm currently doing it with jquery but it takes some rendering time and shows broken contents until the page loads completely as it is added at the end of body tag. I want to load jquery and other scripts at the very end so trying to find a way to do this completely with CSS if possible for getting rid of those rendering effects.
Following is a demo code which needs to work with CSS only -
.container {
width: 100%;
height: auto;
}
.top {
position: fixed;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
.bottom {
height: auto;
width: 100%;
}
<div class="container">
<div class="top">
This is a fixed div with variable height and the bottom content are supposed to pushed and stayed below as the height increases.
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur porttitor neque at vestibulum. Nulla facilisi. Nullam tempus ligula sapien, dictum scelerisque libero tristique et. Ut sit amet magna eros. Suspendisse potenti. Donec vitae sodales nunc. Nunc eget condimentum urna. Nulla sit amet lectus ac nunc mattis porttitor eget quis purus. Ut rhoncus nulla eget velit tincidunt luctus. Donec in justo tempus, porttitor magna nec, semper eros. In bibendum magna eget lectus viverra ultricies. Integer pharetra augue lorem, eu tempus nulla volutpat dignissim.
Morbi vulputate arcu sit amet lectus porttitor hendrerit. Donec id pharetra urna, sit amet tincidunt nulla. Nam semper felis vitae odio elementum posuere. Vivamus blandit accumsan sapien, vitae blandit est lacinia et. Nam sit amet diam massa. Quisque et erat et orci dignissim congue. Maecenas pellentesque pretium sodales. Donec pellentesque rhoncus tortor et hendrerit. Phasellus nec dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce nec ligula mollis, iaculis est a, lobortis est. Phasellus faucibus varius arcu, eget volutpat quam venenatis vel. Sed felis nulla, pulvinar ut metus ac, luctus finibus tortor. Aliquam vulputate, nulla quis accumsan pretium, lacus elit sollicitudin ipsum, non faucibus erat mauris a felis.
</div>
</div>
try this
.bottom {
height: auto;
width: 100%;
margin-top: 1cm;
}
I have updated the fiddle and its working:https://jsfiddle.net/m0615z32/1/
Below is a pure javascript code that will work for you. Please check
What i have done is set the padding-top of below container to be equal to height of top container without using jquery.
document.getElementById("bottom-div").style.paddingTop = document.getElementById("top-div").clientHeight+"px";
OR
If You can change your top container to be relative than fixed, then also this works but is not keeping the div fixed on top
.top {
position: relative;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
Now the top content will always be on top. It will adjust according to content and below container will start after top ends.
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
What I would like to reach is the following design:
Two text blocks with some gaps inbetween aligned around the page midline (see the picture).
I tried to play around with float property, using margin and padding to get the gap, but I can't get them centered.
EDIT:
I forgot to indicate that the arrows show the resizable parts: so, the page width must be resizeable whereas the text itself isn't, but the text is dynamic content and can change from page to page, so there is no way to just define constant width for it in pixels.
You could do it like this
<div id="wrapper"> <!-- wrapper will be in the middle of the page -->
<div id="box1"></div> <!-- Your First Box -->
<div id="box2"></div> <!-- Second Box -->
</div>
#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */
Use display: table with margin: 0 auto for centered block and display: table-cell with percentage padding for its children. Set percentage width for centered block if needed.
Something like this?
HTML:
<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>
CSS:
body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}
For the left block, set the left margin to auto. For the right block, set the right. Like this:
#leftBlock {
margin-left: auto;
}
#rightBlock {
margin-right: auto;
}
This puts them back to back in the center of the screen.
To add space in between the blocks, set the other margin to some defined amount:
#leftBlock {
margin-left: auto;
margin-right: 5%;
}
#rightBlock {
margin-right: auto;
margin-left: 5%;
}