I have two DIV's, first DIV is an icon, second one is a long text, both floated left:
<div class="container">
<div class="icon"></div>
<div class="text"></div>
</div>
CSS
.container
{
border: 1px solid gray;
}
.icon
{
float: left;
width: 25px;
height: 25px;
}
.text
{
float: left;
}
The problem is when I resize the browsers width to minimum, the icon stays on the first line and the text gets divided into 2nd, 3rd, 4th etc.. lines. I want at least some of the text stay on the first line, in other words, I want the text to wrap around the icon if there's no more space left. How can I accomplish this? Thanks!
Simply removing the "text" element would do the task.
<div class="container">
<div class="icon"></div>
Text that you want to be wrapped can be written here
</div>
Apply the remaining width using calc for the .text element like below.
.text
{
float:left;
width:calc(100% - 30px);
}
.container
{
border: 1px solid gray;
}
.icon
{
float: left;
width: 25px;
height: 25px;
border:1px solid #ff00ff;
}
.text
{
float:left;
width:calc(100% - 30px);
}
<div class="container">
<div class="icon"></div>
<div class="text">This is some text showing how it is woring for a loooooooooong text.</div>
</div>
You only change next element to display block and no float
.text {
display: block;
}
you can add more margin of .icon
.icon
{
float: left;
width: 25px;
height: 25px;
margin:0 10px 10px 0;
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed last year.
I keep running into this problem - I have html like this:
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"></div>
</div>
and this css:
.line
{
background-color:red;
padding:10px;
}
.word
{
display:inline-block;
width:200px;
height:40px;
padding:10px;
background-color:white;
}
And I get this:
Why is it happening, and how do I fix it so that an empty string is formatted exactly the same as a string with values?
Vertical align
You could apply vertical-align:top to .word
.line {
background-color: red;
padding: 10px;
}
.word {
display: inline-block;
width: 100px;
height: 40px;
padding: 10px;
background-color: white;
vertical-align: top;
}
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"> </div>
<div class="word"></div>
</div>
Empty selector
Or add a rule for empty .word divs, but this would still be malformed for divs with spaces in them. Could be helpful if you can't change the vertical-align
.line {
background-color: red;
padding: 10px;
}
.word {
display: inline-block;
width: 100px;
height: 40px;
padding: 10px;
background-color: white;
}
.word:empty:before {
content: "\0020";
display: inline-block;
}
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"> </div>
<div class="word"></div>
</div>
Why is this happening
Vertical alignment determines how 'inline' elements are positioned in relation to each other. by default it's set to baseline
Baseline will try to put 'most' of the text above the baseline and some of the dangling bits like the g p and q and y under the baseline.
That would make sense for text, the browser will attempt to do that for all text. Even text that's wrapped in divs and styled with paddings.
The entire empty div is put on the baseline.
Browser manufacturers just agreed that this is how it should be done.
If you look at it as if it where a text editor, It would make sense for small inline images, the default would be to push the entire line down based on the dimension of the image
Equal height <div> elements can be achieved when applying the .line class style display: flex.
.line {
background-color:red;
padding:10px;
display: flex;
}
.word {
border: 1px solid red;
margin-left: 5px;
margin-right: 5px;
width: 200px;
height: 40px;
padding: 10px;
background-color: white;
}
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"></div>
</div>
I have a container div called main and then two divs floated left. The problem is that I need the main div background color visible (I supposed that the blue color background should be visible on the right side (300px which remains) and at the 4th row of the medium div as it is lower div than the left div). I also need both left and medium divs to automatically increase their heights on words wrapping and as you can see it does not work in the grey (middle) div.
See the http://jsfiddle.net/djqfo3we/2/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
You have to clear the floats otherwise the margins of the parent collapse and it appears that the parent has no height.
There are various techniques for clearing floats and you can find out more with a simple search
As for the text wrapping, as you have discovered long text strings won't break by themselves.
You can force a word break using word-wrap:break-word and leave your original text unchanged.
.main {
width: 500px;
background-color: blue;
overflow: hidden; /* quick clearfix */
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
Add a div inside the main div but at the bottom called clear:
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
Then give the class clear a style:
.clear {
clear: both;
}
and you get this: http://jsfiddle.net/djqfo3we/4/
EDIT:
As others have pointed out, in order to apply a wrap so that they stay within the set width dimensions, add the style word-wrap: break-word; to the content you want to have wrapped.
I've applied the word-wrap to both the middle and left div within the main div.
updated jsfiddle: http://jsfiddle.net/djqfo3we/10/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
.clear {
clear: both;
}
.middle, .left {
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I am trying to render a section of my pafe as in this following image. http://i.imgur.com/63q9Syr.jpg
while I am getting it to work fine for smaller screens (using media queires) I am not able to get it for for screen size > 768px. It either makes the 2 boxes overlap or the space on the either sides of the boxes aren't even. Is there a way I can fix it?
<section class="carousel price-carousel">
<div class="container">
<div class="price-Container">
<div class="month-column">
<h4>Monthly</h4>
<p>$9.95</p>
<p class=”sub-text”>per computer</p>
</div>
<div class="year-column">
<h4>Yearly</h4>
<p>$99</p>
<p class=”sub-text”>Save 20% when you pay anually</p>
</div>
</div>
</div>
</section>
JSFiddle: http://jsfiddle.net/d4gyo5s8/
Instead of floats, I would use inline blocks as follows.
.container {
margin: 0 auto;
max-width:1050px;
}
.price-carousel{
background-color: #eee;
float:left;
height:auto;
margin-top: 10px;
padding-bottom: 10px;
width:100%;
}
.price-Container {
text-align: center; /* this will center the month and year columns */
}
.price-carousel .month-column{
background-color: #fff;
border: 1px solid;
display: inline-block; /* add this line instead of float */
height:120px;
margin-left: 0;
margin-top:35px;
text-align: center;
width:240px;
}
.price-carousel .year-column{
border: 1px solid;
background-color: #fff;
display: inline-block; /* add this line instead of float */
height:120px;
margin-left: 30px;
margin-right: -10%;
margin-top:35px;
text-align: center;
width:240px;
}
.price-carousel .year-column h4, .price-carousel .month-column h4{
background-color: #676767;
color: #fff;
height: 25px;
margin-top: 0px;
padding-top:5px;
width: 100%;
}
<section class="carousel price-carousel"> <!--Price section -->
<div class="container">
<div class="price-Container">
<div class="month-column">
<h4>Monthly</h4>
<p>$9.95</p>
<p class=”sub-text”>per computer</p>
</div>
<div class="year-column">
<h4>Yearly</h4>
<p>$99</p>
<p class=”sub-text”>Save 20% when you pay anually</p>
</div>
</div>
</div>
</section>
I'll just post an updated version of the JSFiddle
Basically I removed the float :left|right and I added the CSS display: inline-block so that your two announcements indeed act as inline-blocks. As you have text-align : center then the blocks will automatically center on the screen. Feel free to add some margin if you want to increase the space between them.
http://jsfiddle.net/um0nyna3/
HTML:
<div class="wrapper">
<div class="leftcol">
test
</div>
<div class="rightcol">
test
</div>
</div>
CSS:
.wrapper {
width: 500px;
margin: 0 auto;
}
.leftcol {
float: left;
width: 49%;
background-color: lightblue;
margin-right: .5%;
margin-left: .5%;
}
.rightcol {
float: left;
width: 49%;
background-color: lightgreen;
margin-right: .5%;
margin-left: .5%;
}
Heres a good base for you to start off with.
Basically to get it even for a responsive site you need to set all widths in percentages. Any padding/margin on left or right also need to be percentages. Test this out. I didn't add any media queries as this should give you a good base.
I want to place 3 div's evenly inside another div. However, I can't get rid of the right margin for the last floating box. Also, the spaces between them do not look right to me.
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div>
<div style="clear:both;"></div>
</div>
</div>
.page{
background-color: green;
padding: 10px;
}
.box{
background-color: blue;
}
.b{
width: 30%;
margin-right: 3%;
background-color: #999;
float: left;
height: 100px;
}
The code is located at http://jsfiddle.net/u6KqK/
Is there a better solution for this?
You're using 99% (30+30+30+3+3+3) of the parent div, not 100%, thus why the right margin of the right-most div appears to be 4%. Here are a couple solutions:
1) set the margin-right to use the final percent:
.b{
width: 30%;
margin-right: 3.3333333333%;
margin-right: calc(10%/3);
background-color: #999;
float: left;
height: 100px;
}
Since older browsers don't support calc, I included a fallback that will be identical for essentially every scenario. Fiddle: http://jsfiddle.net/u6KqK/7/
2) Add a 1% margin to the left of the first div:
.b:first-of-type{
margin-left:1%
}
Fiddle: http://jsfiddle.net/u6KqK/1/
You can add a second class to the middle div and add the margins to that class. That way it only gets applied to the middle class.
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b middle">b2</div>
<div class="b">b3</div>
<div style="clear:both;"></div>
</div>
</div>
.page{
background-color: green;
padding: 10px;
}
.box{
background-color: blue;
}
.b{
width: 30%;
background-color: #999;
float: left;
height: 100px;
}
.middle{
margin-right: 5%;
margin-left: 5%;
}
http://jsfiddle.net/u6KqK/9/
Since you have the left-most div on the actual left it would make sense to have the right-most also to the far right with zero margin
JSfiddle Demo
HTML
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div> /* cleafix div removed */
</div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page{
background-color: green;
padding: 10px;
overflow:hidden; /* quick clearfix */
}
.box{
background-color: blue;
}
.b{
width: 30%;
margin-left: 5%; /* (100% - 3x30%)/2 */
background-color: #999;
float: left;
height: 100px;
}
.box div:first-child {
margin-left: 0;
}
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)