I have this code in a fiddle
I would like to know if its possible to make div float inside text, like its following text?
.a {
position: relative;
width: 100px;
height: 40px;
background: red;
}
<span>Pause and play icons will automatically be attached to every mp3 song in text. Like this for example: </span>
<div class="a"></div><span> ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem.</span>
use display:inline-block along with vertical-align, as you can set it to fit you better.
To users on comments:
This is valid HTML, because span is sibling of div and not its parent.
.a {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 40px;
background: red;
}
<span>Pause and play icons will automatically be attached to every mp3 song in text. Like this for example: </span>
<div class="a"></div><span> ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem.</span>
Related
Ok, CSS gurus. Here's an easy one for you. I want to have a sidebar to the left of my main content area. I'd like the sidebar to take up 30% of the screen and the content to take up 70%. However, I'd like the sidebar area to take up 100% of the available height. I have
<div id="main">
<div id="side">
<%= render "layouts/sidebar" %>
</div>
<div id="contentArea"><%= yield %></div>
</div>
I thought setting the parent DIV to have "display:flex;" would make everything right ...
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
height: 100%;
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
but right now, the height of my sidebar is only equal to the content that's in it. How do I make it 100% of everything?
In your structure ‘main’ is parent div, that’s mean if you set ‘100% of everything’ to child div ‘side’ and this div not position absolute or fixed, ‘main’ get 100% too.
So, you can use relative lengths, like height: 100vh.
jsfiddle
But you can set to side div position fixed: it will help when you get scroll in contentArea, but side div all time will in left side with height 100vh.
jsfiddle
Tip: if you use flex, you can manipulate without float (e.g. justify-content
). Check it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is that you specified a height of 100% on #side. Ironically, this actually prevents the column from taking up the full vertical space, as it caps to at the height of the container. Because #main doesn't have a specified height, setting height: 100% on #side will constrain it to the height of the content (text) within.
Simply removing this causes the column to expand to take up the full vertical space:
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
/*height: 100%;*/
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
<div id="main">
<div id="side">
Side
</div>
<div id="contentArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut interdum quam. Integer nec tincidunt erat, in scelerisque turpis. Pellentesque interdum turpis eu ante gravida, a auctor lacus pulvinar. Maecenas elementum massa ac felis gravida lobortis
vitae eget nisi. Donec erat turpis, condimentum et ipsum in, tincidunt fringilla quam. Nam est dui, porttitor eget nisl sit amet, mollis varius dui. Suspendisse dui mauris, tincidunt vitae blandit ac, consectetur sed ex. Sed bibendum felis ex, id
euismod odio euismod ac. Praesent viverra arcu quis arcu condimentum, eget varius elit suscipit. Donec tempus, justo vel iaculis vehicula, risus magna varius ex, vitae mattis elit turpis ac magna. Fusce porta tempus erat vel ultricies. Suspendisse
vel erat blandit, semper dui sed, consequat urna. Pellentesque ultrices pellentesque feugiat. Donec sit amet turpis in orci accumsan blandit. In tincidunt erat sed tristique sagittis. Duis ultrices lacus quis vestibulum venenatis. Maecenas et risus
quam. Quisque semper purus id mauris gravida dictum. Cras tellus augue, sollicitudin ac maximus eget, porta elementum elit. Fusce vulputate consectetur dapibus. Praesent semper augue lacus, vel laoreet tellus ultricies fermentum. Phasellus vestibulum
fringilla purus ut malesuada.
</div>
</div>
Hope this helps! :)
Use: #side{height: 100vh;} (vh = viewport height), and remove display flex so you can have unequal height for each div.
Link to jsfiddle https://jsfiddle.net/gcoh62o6/5/
I have this pen where the layout is floated, but when I try to flexbox one container below the layout, the flexbox doesn't work. I know it is caused by the floats however, can't find a way to fix it. Tried to use clearfix but it doesnt work.
The items that i'm trying to flex is in summary tag.
Code Snippet:
summary {
clear: both;
padding: 20px;
background: white;
display: flex;
}
summary p {
width: 33%;
display: inline-block;
background: pink;
margin: 0px;
padding-right: 20px;
}
<summary class="clearfix">
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
</summary>
CodePen
The problem is that you are using flexbox in a summary tag, which is not a structural one. summary is used inside a details element. Consider using a proper semantic tag like article or section for this, and it will work.
Code Snippet:
summary,
article {
display: flex;
}
p::before {
content: "Paragraph.";
}
details > summary {
display: block;
}
<summary>
<p></p>
<p></p>
<p></p>
</summary>
<article>
<p></p>
<p></p>
<p></p>
</article>
<details>
<summary>Proper Usage</summary>
<p></p>
</details>
Change the styles to this classes
#wrapper {
width: 90%;
margin:auto;
padding: 0 20px 0 20px;
margin-bottom:20px;
display:flex;
flex-direction:column
}
and on summary remove clear and display:flex
every thing will work as expected
check this fiddle https://codepen.io/sahithiK/pen/LRqjoR?editors=1100
Hope this helps
I know this is a common question, but after having a good look around, none of the specified solutions seem to work.
The closest I've come is to using position: absolute, and setting 100% height. But this causes a problem in that the div to be made 100% high is of variable width, so I can't apply a padding to the rest of the content to move it out from behind the absolutely positioned element.
Here's a roughly drawn example of the final idea:
Note that the numbers on the left could be two or three digits. The dark grey area is what has to be the full height of the cell.
I'm beginning to think that just using a table is the easiest way out here. Perhaps taking the hit of having the grey areas the same width, whatever the largest number is.
Am I missing a much better (cross-browser, non-JS) way?
With such a simple layout, absolute positioning is definitely you best bet, so you were on the right track. The trick is not to set height:100% (because the height is variable), but to set top:0;bottom:0;. Also, you don't need to use a separate div for the number, you can just use a pseudo element - see the below snippet:
* { margin:0; padding:0; }
ul { font-family: sans-serif; list-style:none;}
ul>li { position: relative; min-height: 35px; border: 1px solid #000; padding: 10px 10px 10px 45px;}
ul>li:before { position: absolute; top:0; bottom:0; left:0; width: 40px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}
<ul>
<li data-id="1">Lorem ipsum dolor sit ame</li>
<li data-id="37">Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</li>
<li data-id="12">Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</li>
</ul>
EDIT
This is the way to do it with non-fixed widths (and using display: table and still using pseudo elements). I would still opt for the position: absolute way because I think the layout looks better, but here it is. In CSS, there's about a thousand ways to skin a cat.
* { margin:0; padding:0; }
ul { font-family: sans-serif; list-style:none;}
ul>li { display: table; position: relative; border: 1px solid #000; width: 100%;}
ul>li>div { display: table-cell;padding: 10px; }
ul>li:before { display: table-cell; padding: 10px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}
<ul>
<li data-id="1"><div>Lorem ipsum dolor sit ame</div></li>
<li data-id="37"><div>Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</div></li>
<li data-id="12"><div>Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</div></li>
</ul>
I have one div which is centred and another one on the right side which may have some content. If this on the right have content in it, the centred one needs to move on the left. In the end the content from the two divs needs to be in the centre.
For example: I have a search box in the centre. If I have an result from the search - the result and the search box needs to be in the centre. So the search box have moved a little bit on the left.
How can I make that whit CSS?
One way to do it is to use text-align: center and display: inline-block. Here's a fiddle with both elements centered: http://jsfiddle.net/rs6bmfq9/. And, here's a slightly different fiddle with "text" div removed: http://jsfiddle.net/hrham7w9/.
HTML:
<div class = "container">
<input type = "text" />
<div>
Nam at justo dignissim, dapibus lorem eget, consectetur metus. Suspendisse vitae massa a nunc congue pulvinar non luctus mi. Nam turpis ex, laoreet tempor justo ac, cursus convallis urna. Sed eros ligula, congue ut lacinia auctor, porttitor ut quam. Nullam maximus, dui in eleifend viverra, est augue vestibulum est, id lacinia nibh ante vel velit. Aenean vitae sem ipsum. In porta felis urna, vel tincidunt odio aliquam feugiat.
</div>
</div>
CSS:
.container {
white-space: nowrap;
text-align: center;
}
.container > * {
display: inline-block;
}
.container > input {
width: 30%;
vertical-align: top;
}
.container > div {
width: 40%;
text-align: left;
white-space: normal;
vertical-align: top;
border: 1px dotted gray;
}
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.