I am trying to figure out, how to place two divs next to each other without specifying the width. It is not as easy as it seems:
the HTML:
<div id="container">
<div id="column1">Fixed Width</div>
<div id="column2">Auto Width</div>
</div>
the CSS:
#container {
float:left;
width:200px;
}
#column1 {
float:left;
width:24px;
background:gray;
}
#column2 {
float:left;
width:auto;
background:blue;
}
*the #container has 200px fixed width (could be XX%). #column1 has a fixed width of 24px, #column2 has the width set to auto.
This will work just fine and column2 will be next to column1, until the contents of column2 will reach the limit of 200-24 where, instead of a line break inside the div, column2 will jump below column1.
What I am trying to achieve (bulletproof) that column2 stays next to column1, inside container, no matter how big the content of column2 gets. Height is auto and does not matter.
(I am trying to create a message box, similar to Facebook, thumbnail on the left side, text next to it with unlimited height. I don't want the text from column2 to jump below or wrap around column1). May be very easy, could not figure it out. As always, any help would be highly appreciated! :)
If you remove float property from #column2 and set display: table; you will get desired effect.
HTML
<div id="container">
<div id="column1">Fix</div>
<div id="column2">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
</div>
CSS
#container {
float:left;
width:200px;
}
#column1 {
float:left;
width:24px;
background:gray;
}
#column2 {
background:blue;
display: table;
}
DEMO
Try to remove or add more "Lorem Ipsum" text.
You can certaily do this:
#column2 {
/* float:left; removed */
width:auto;
background:blue;
}
As colum1 will force column2 to be by his side, when content be much larger than the left sapce ccolumn2 will just expand down.
If you don't wrap the DIVs in an other way, just try this:
<div style="width: 200px; border: 3px solid red; ">
<div style="width:24px; display: table-cell; border: 3px solid blue; ">
aaa
</div>
<div style="display: table-cell; border: 3px solid green;">
bbb bbb
</div>
</div>
http://jsfiddle.net/Zctjr/2/
Just set max-width to make it wrap instead of keep growing
Related
I have 3 blocks
<div>loremloremloremlorem</div>
<div>loremloremlorem</div>
<div>loremloremloremlorem</div>
How to set CSS to have aqual height ? I cant use row, because it's responsive design and I 1 row can be flexible count of items.
Use display:table and display:table-cell.
.container {
display:table;
}
.item {
display:table-cell;
width:100px;
border:2px solid black;
}
.item + .item {
border-left:none;
}
<div class="container">
<div class="item">test test test test</div>
<div class="item">test test test test test test test test test test test test</div>
<div class="item">test test test test test test test test</div>
</div>
You can also use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
div.container {
display:flex;
}
div.item {
border:1px solid #000;
display:block;
width:100px;
}
<div class="container">
<div class="item">lorem lorem lorem lorem lorem lorem</div>
<div class="item">lorem lorem lorem</div>
<div class="item">lorem lorem lorem lorem lorem lorem lorem</div>
</div>
If you can wrap them inside a container, you can set it display:table and assign display:table-cell to each inner DIV. In this way, blocks are treated as table cells and so, alla with equal height. Please look at this jsFiddle
CSS:
#wrapper
{
display:table;
}
#wrapper div
{
display:table-cell;
border:solid 1px red;
width:50px;
}
You can solve this, by using display: table in the container div, and use display: table-cell in children.
See my CodePen code:
http://codepen.io/michelgefuni/pen/YPeVxN
How to make text wrap before inner floating elements inside a container?
Here is what I'm trying to do...
http://codepen.io/W3Max/pen/tKwqz
<div>
<div style="height:100px;width:300px;background-color:blue;float:left;"></div>
<div style="height:100px;float:left;word-wrap: break-word;background-color:green;">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk</div>
<div style="height:100px;width:300px;background-color:red;float:left;"></div>
</div>
I would like the text inside the green div (in the middle) to wrap before the row wraps when I resize the screen.
I would prefer to to support IE9. Is it possible without flexbox?
display:table is compatible with IE8+ and can achieve what you're looking for:
Forked pen.
.container {
display: table;
width: 100%;
/* if you don't want 100% width, set a max-width too */
word-wrap: break-word;
}
.container > div {
display: table-cell;
height: 100px;
}
.container > div:first-child, .container > div:last-child {
width: 300px;
}
<div class="container">
<div style="background-color:blue;"></div>
<div style="background-color:green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div style="background-color:red;"></div>
</div>
HTML
<div id="green">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk<div>
CSS
#green {padding:10px} (resize it) on green div .
I have a list of simple HTML elements like divs, Paragraphs, etc. I'd like to display them in fixed height container, with the content shown in columns with same fixed width, all horizontally scrollable, just like it's shown on this picture.
The browser it should work in is IE11.
Any idea, how to implement it? Thanks.
Put them all in:
<div class="sample"></div> and wrap them in a <div class="container"></div>
Give all .sample classes and .container a fixed width and height.
.sample {
width: 900px;
height: 500px;
}
.container {
overflow-x: scroll;
overflow-y: hidden;
}
You could use css3 columns
http://www.w3schools.com/cssref/css3_pr_columns.asp
<div id="main">
Content here, no wrapping divs needed...
</div>
Or even better using html5
<main>
Content here, no wrapping divs needed...
</main>
You must put all the elements in a container, and give it a width large enough to not wrap the elements around. The elements should either float: left or display: inline-block.
Then put a div pane around, which shows a cutout of the container and give that pane overflow-x: auto in order to show a scrollbar when necessary
<div class="pane">
<div class="container">
<p class="column">Lorem ipsum dolor sit amet, ...</p>
<div class="column">Lorem ipsum dolor sit amet, ...</div>
<div class="column">Lorem ipsum dolor sit amet, ...</div>
<p class="column">Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
.pane {
width: 100%;
height: 380px;
overflow-x: auto;
}
.container {
width: 1250px;
max-height: 350px;
}
.container .column {
display: inline-block;
width: 300px;
}
See JSFiddle
Here's my simple markup:
<div class="row">
<div class="col fixed">Short text</div>
<div class="col fluid">Longer text....</div>
</div>
And here's my CSS:
.row {
padding: 20px;
}
.row:after {
content: "";
display: block;
clear: both;
}
.col {
float: left;
}
.col.fixed {
width: 200px;
}
I thought the fluid text would appear next to the fixed column (to its right), and would then wrap down. This is not what actually happens. Instead, the whole .col.fluid drops under the other column, as if there were no floats.
The demo is here.
Why doesn't this work (isn't this how floats are supposed to work)? And what can I do to fix this?
One way to do this is by using this CSS:
.row {
background: rgba(0, 128, 0, .2);
padding: 20px;
display:table;
}
.col {
display:table-cell;
}
.col.fixed {
width: 200px;
}
jsFiddle example
To get the effect that you want, you need to place the floated-fixed box inside the fluid, block-level div.
See the following: http://jsfiddle.net/audetwebdesign/7cMQg/6/
<div class="row">
<div class="col fluid">
<div class="col fixed">Short text: to see the full effect,
type in a bit more text so that you can get a few lines
in the floated-fixed-width box.</div>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry...
</div>
</div>
If you check the CSS, I added a right margin to the floated div and changed the background color to highlight the positioning.
If you'd like an effect similar to the first letter being larger than the rest of the text (found in many books & writings), try this:
<div>
<span class="fixed">Short text</span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
CSS
.fixed {
width: 200px;
display:inline-block;
}
jsFiddle
Hi there I know that is a silly question but I couldn't find a solution for this case, my css skills are not good :(.
How can I achieve the layout below.
The text should wrap at the end of the container(div,span,whatever)
---- --------------------------
|URL:|thissdfsisalongurasdsdfrea|
----|allyyyyyyyyyyylonggggggggg|
|sdddfasdfsdfasdfsadfsdfsds|
|--------------------------|
http://jsfiddle.net/tmqCR/
A few of these responses have what you need. I think this has everything together though.
The HTML:
<div class="container">
<div class="url">
URL:
</div>
<div class="text">
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
</div>
<div class="clear"></div>
</div>
The CSS:
.url {
float:left;
width:60px;
}
.text {
float:left;
width:200px;
}
.clear {
clear:both;
}
Check out this fiddle http://jsfiddle.net/FEZaJ/
The URL - Float it left;
The media element. Really breaks down to float: left; on the first element and overflow hidden on the second.
Hi i m created this like one.
Css
.url {
float: left;
width: 75px;
background:pink;
}
.description{
float: left;
width: 175px;
word-wrap: break-word;
text-align:justify;
background:lightgreen;
}
HTML
<div class="url">URL:</div>
<div class="description">thissdfsisalongurasdsdfreaallyyyyyyyyyyylongggggggggsdddfasdfsdfasdfsadfsdfsds</div>
Live demo Click here http://jsfiddle.net/rohitazad/tmqCR/25/