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
Related
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
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
Please, look at this sample template: http://jsfiddle.net/D8cye/2/
As you can see, the navbar expands to the bottom of the sidebar. Why? How can I avoid this?
I know I can workaround this by setting .navbar-inner{height:40px;}. But I feel that I'm doing something wrong of perhaps I have misunderstood something with the fluid grid.
Forked it here http://jsfiddle.net/Astraldiva/r6tHv/.
I think that one of the important things to consider while using twitter bootstraps fluid layout is not to have items with fixed width or the layout will brake. Not sure if this helps but I just rearranged the containers and placed the content in span8 + span4 divs to get similar layout like you wanted and this version should work on different screen sizes.
<div class=row-fluid>
<div class=span8>
<div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class=navbar>
<div class=navbar-inner>
<ul class=nav>
<li class=active><a href=#>Home</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
</div>
</div>
<div class=span4>
<div class=box></div>
<div class=box></div>
<div class=box></div>
</div>
</div>
EDIT
To get the wanted layout Peter made an extension on my idea in this fiddle.
There is a 2 column layout, a fixed with sidebar and fluid content area (with max and min width). So it's not completely fluid but solves the problem.
<div id=container>
<!-- Sidebar is floated right and has fixed width -->
<div id=side>
<div class=box></div>
<div class=box></div>
<div class=box></div>
</div>
<!-- Content wrapper is in normal flow with margin-right of at least the width of a sidebar-->
<div id=main>
<div class=row-fluid>
<div class=span12>
<div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class=navbar>
<div class=navbar-inner>
<ul class=nav>
<li class=active><a href=#>Home</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
border: 1px solid #f00;
max-width: 600px;
min-width: 300px;
}
#side {
float: right;
width: 100px;
border: 1px solid #0f0;
}
#main {
margin-right: 108px;
border: 1px solid #00f;
}
#text {
padding: 8px; margin: 8px; border: 1px solid #888;
}
.box {
height: 80px;
margin-bottom: 8px;
background: #ddd;
}
Note: twitter bootstrap css included.
Hope it helps.
Use display: inline-block; for .navbar-inner like this Demo
Explanation: using display: inline-block; won't take up the extra space which your navigation bar was using before, horizontally as well as vertically... :)
CSS
.navbar-inner {
display: inline-block;
}
Edit: If you want your navigation menu to be 100% of width than do it like this
Demo 2
CSS
.navbar-inner {
overflow: hidden;
}
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/