If any of the nested divs below have a length longer then an adjacent div, the divs don't wrap to the next line "properly".
Without dividing each row in it's own div, is there a way to force div #5 (in the example below) to fall underneath div #1 even if div #1 is taller than the rest?
<style type="text/css">
.video-item {
margin: 10px 29px 20px 0px;
width: 208px;
float: left;
overflow: hidden;
}
</style>
<div style="width: 948px;">
<div class="video-item">1<br>This is what happens when Description is too long... </div>
<div class="video-item">2<br>Description</div>
<div class="video-item">3<br>Description</div>
<div class="video-item">4<br>Description</div>
<div class="video-item">5<br>Description</div>
<div class="video-item">6<br>Description</div>
<div class="video-item">7<br>Description</div>
<div class="video-item">8<br>Description</div>
<div class="video-item">9<br>Description</div>
<div class="video-item">10<br>Description</div>
</div>
Example with even Description:
Example with uneven Description:
You need to set the clear CSS style on the div, to bring it back into normal flow:
<style type="text/css">
.video-item {
margin: 10px 29px 20px 0px;
width: 208px;
float: left;
overflow: hidden;
}
.clear {
clear: left;
}
</style>
<div style="width: 948px;">
<div class="video-item">1<br>This is what happens when Description is too long... </div>
<div class="video-item">2<br>Description</div>
<div class="video-item">3<br>Description</div>
<div class="video-item">4<br>Description</div>
<div class="video-item clear">5<br>Description</div>
<div class="video-item">6<br>Description</div>
<div class="video-item">7<br>Description</div>
<div class="video-item">8<br>Description</div>
<div class="video-item clear">9<br>Description</div>
<div class="video-item">10<br>Description</div>
</div>
With CSS3, you could use :nth-child to achieve this more dynamically:
.video-item:nth-child(4n+1) {
clear: left;
}
Another solution would be to force the height of your elements like this: (but #Pete solution is more elegant)
.video-item {
margin: 10px 29px 20px 0px;
width: 208px;
float: left;
overflow: hidden;
height: 70px;
}
jsFiddle here
Related
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
I managed to overflow a parent div which is a content wrapper with the following CSS, however now this div hides content behind it. How can I do this right?
jsfiddle: http://jsfiddle.net/YMSvU/
My HTML File
<div class="contentwrapper">
<div class="promotional_outer">
<div class="promotional">
...
</div>
</div>
<div class="footer">
... this footer is overflown by the promotional div ...
</div>
</div>
My CSS File
.contentwrapper {
width: 1150px;
text-align: left;
margin: 0px auto;
}
.promotional_outer{
background-color: #8fcbe5;
position:absolute;
left: 0;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
.promotional {
background-color: #30a3da;
padding: 75px;
color: #fff;
width: 1000px;
margin: 0px auto;
clear: both;
}
I had exactly the same problem on a site I'm working on at the moment.
Turns out the only solution is to do it like this:
<div class="wrapper">
<div class="header">
...
</div>
</div>
<div class="promotion_outer">
<div class="wrapper">
<div class="promotion_inner">
...
</div>
</div>
</div>
I think it would be best to adjust your html to do something like this:
<div class="inner">
<p>Content</p>
</div>
<div class="promo">
<div class="promo--inner">
<p>Content</p>
</div>
<div class="promo--callout">
<p>Promo callout</p>
</div>
</div>
<div class="inner footer">
<p>Footer content</p>
</div>
Check out this fiddle: http://jsfiddle.net/kFShb/2/
You can bypass the element's flow by using z-index.
.footer {
position: relative;
z-index: 10;
}
Fiddle
Remove position: absolute from .promotional_outer.
Absolute positioning removes an element from the normal document flow.
Just delete position: absolute; and left: 0; in your CSS
.promotional_outer{
background-color: #8fcbe5;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
This should solve your problem.
I have an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.
CSS
#container
{
width: 400px;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 180px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
HTML
<div id="container">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div>
This can be viewed at Demo1
But what I want is like this result. The only thing is that the height of the individual items can be different.
Hope I have made everything clear.
Thanks in advance
Additional clarification
The content elements will be generated dynamically in server and will be passed to the client.
Also the order should be like 1,2,3,4,...
The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.
You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....
I've searched other questions and, while this problem seems similar to a couple of others, nothing I've seen so far seems to address the issue that I'm having.
I have a div which contains a number of other divs, each of which is floated left. These divs each contain a photo and a caption. All I want is for the group of photos to be centered within the containing div.
As you can see from the code below, I've tried using both overflow:hidden and margin:x auto on the parent divs, and I've also added a clear:both (as suggested in another topic) after the photos. Nothing seems to make a difference.
Thank you. I appreciate any suggestions.
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
First, remove the float attribute on the inner divs. Then, put text-align: center on the main outer div. And for the inner divs,
use display: inline-block. Might also be wise to give them explicit widths too.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
With Flexbox you can easily horizontally (and vertically) center floated children inside a div.
So if you have simple markup like so:
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
with CSS:
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
(This is the (expected - and undesirable) RESULT)
Now add the following rules to the wrapper:
display: flex;
justify-content: center; /* align horizontal */
and the floated children get aligned center (DEMO)
Just for fun, to get vertical alignment as well just add:
align-items: center; /* align vertical */
DEMO
I accomplished the above using relative positioning and floating to the right.
HTML code:
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS:
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JSFiddle: http://jsfiddle.net/MJ9yp/
This will work in IE8 and up, but not earlier (surprise, surprise!)
I do not recall the source of this method unfortunately, so I cannot give credit to the original author. If anybody else knows, please post the link!
The following solution does not use inline blocks. However, it requires two helper divs:
The content is floated
The inner helper is floated (it stretches as much as the content)
The inner helper is pushed right 50% (its left aligns with center of outer helper)
The content is pulled left 50% (its center aligns with left of inner helper)
The outer helper is set to hide the overflow
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}
<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>
display: inline-block; won't work in any of IE browsers. Here is what I used.
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Solution:
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
In my case, I could not get the answer by #Sampson to work for me, at best I got a single column centered on the page. In the process however, I learned how the float actually works and created this solution. At it's core the fix is very simple but hard to find as evident by this thread which has had more than 146k views at the time of this post without mention.
All that is needed is to total the amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin:auto. That's it!
The elements in the layout will dictate the width and height of the "outer" div. Take each "myFloat" or element's width or height + its borders + its margins and its paddings and add them all together. Then add the other elements together in the same fashion. This will give you the parent width. They can all be somewhat different sizes and you can do this with fewer or more elements.
Ex.(each element has 2 sides so border, margin and padding get multiplied x2)
So an element that has a width of 10px, border 2px, margin 6px, padding 3px would look like this:
10 + 4 + 12 + 6 = 32
Then add all of your element's totaled widths together.
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
In this example the width for the "outer" div would be 112.
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}
<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>