<html>
<head>
<style type="text/css">
.container {
width: 900px;
border: 2px solid #333333;
padding-top: 30px;
padding-bottom: 30px;
}
.container_left {
border: 2px solid #FF00FF;
width: 650px;
float: left;
}
.container_right {
border: 2px solid #0000FF;
width: 225px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="container_left">
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
</div>
<div class="container_right">
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
</div>
</div>
</body>
</html>
The result is:
I want a result like this:
Add overflow: hidden; to the .container selector. This will force the container to acknowledge that it has children.
Give the container a
overflow: auto
or
overflow: hidden
see this page on quirksmode.org for details on the issue.
A quick fix is to add overflow: hidden to your .container.
This is not the best solution per say, merely the quickest fix. Your best solution would be to implement and apply clearfix as it doesn't have issues with printing due to overflow.
In the event you use overflow: auto or overflow: hidden and a user attempts to print the page, content that does not fit on the printed page will be clipped because:
scroll-bars do not print
hidden content does not display
One option is to put in a <div style="clear: both;"></div> just before closing the container div.
<div class="container">
<div class="container_left">
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
</div>
<div class="container_right">
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
</div>
<div style="clear: both;"></div>
</div>
to the outer div you might want to use the clearfix css, explained here: http://www.positioniseverything.net/easyclearing.html
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }
Apply .clear to your parent element.
This might be of help "Clearing a float container"
Related
I have built a template to layout what I intend to accomplish. Everything seems to work well with what I have learned from the stackoverflow community.
However, the Footer which is its own container and has "section7" as another DIV is not displaying as 150 pixels in height. Basically all sections have fixed height except for Section 5 and Section 6 which have to scale in height depending on the browser window size or content that will be placed inside the section. So if content is sparse, I just want the height to be 100% of the remaining browser space so that the website is top to bottom. However if there is content that is lengthy obviously I want the middle section to adapt and continue as required. Hope I am making sense.
The challenge is I don't know where I am wrong and thus do not know how to pose the question in the search function as I imagine it is an easy task for those with experience. Any help is appreciated.
The HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</div>
<div class="middle">
<div class="section5">section 5</div>
<div class="section6">section 6</div>
</div>
<div class="footer">
<div class="section7">section 7</div>
</div>
</div>
</body>
</html>
The CSS:
#charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-color:#DBDBDB
}
div.container {
width: 1200px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
div.header {
height: 100px;
}
div.middle {
min-height: 400;
}
div.footer {
height: 150px;
}
div.section1 {
background-color:#FF0004;
height: 100px;
width: 275px;
float:left;
position:relative;
}
div.section2 {
background-color:#FFA600;
height: 100px;
width: 100px;
float:left;
position:relative;
}
div.section3 {
background-color:#00C304;
height: 50px;
}
div.section4 {
background-color:#DFDD00;
height: 50px;
}
div.section5 {
background-color:#0A00FF;
width: 275px;
height: 400px;
float:left;
height: 100vh;
}
div.section6 {
background-color:#CB05B1;
width: 925px;
height: 400px;
float:right;
height: 100vh;
}
div.section7 {
background-color:#9E9E9E;
height: 150px;
}
Floating elements need to be cleared so that elements following align correctly and do not move into the elements you have floated. Section 5 and Section 6.
Add the following class definition to your stylesheet
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
Change the following tag <div class="middle"> to <div class="middle clearfix">
HTML5 also includes <header> and <footer> elements, as well as <article> tags to make the document language more semantic. So for HTML5 you can use
<header>
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</header>
And
<footer>
<div class="section7">section 7</div>
</footer>
https://jsfiddle.net/raythcael/s49o4rjz/2/
To make .section7 have a height of 150px add display: inline-block;
div.section7 {
background-color: #9E9E9E;
height: 150px;
display: inline-block;
}
See: https://jsfiddle.net/zvkxj6v8/
The reason why the height isn't working as it should is because the Div's above it is set to "float". Add "clear: both;" to div.section7 to clear the floats.
https://jsfiddle.net/2L55g0f9/1/
because section 5 and 6 are floated, you're not seeing the height of section 7. All i did was clearfix it, and you got your height :)
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
I have the following HTML:
<div style="width:300px;background:yellow;">
<div style="float:left;border:solid 2px red;"><!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
</div>
<div style="border:solid 2px lime;float:left;"><!--Text Div-->
Banana!
</div>
<div style="clear:both;"></div>
</div>
I need to set the width of the Text Div such that it occupies the remaining width. I know this can be done by using width style attribute as width:164px;. What I needed to know is: Can this be done without setting the width manually using other css properties?
1) Remove float:left from the text div
2) Set overflow:hidden (or auto) on the text div
Updated fiddle
This creates a new block formatting context which causes the text div to fill the remaining width
Try this
<div style="width:300px;background:yellow;">
<div style="float:left;border:solid 2px red;"><!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
</div>
<div style="border:solid 2px lime;display:block; text-align: center; overflow: hidden;"><!--Text Div-->
Banana!
</div>
<div style="clear:both;"></div>
</div>
I added display:block; text-align: center; overflow: hidden; and removed the float: left from the text div
use display:table for parent and display:table-cell for the one which you want the width to fill
Note : moved your styles outside
.top {
width: 300px;
background: yellow;
display: table;
}
.inside {
float: left;
border: solid 2px red;
}
.txt {
border: solid 2px lime;
display: table-cell;
width: 100%;
vertical-align: top;
}
.clear {
clear: both;
}
<div class="top">
<div class="inside">
<!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png" />
</div>
<div class="txt">
<!--Text Div-->Banana!</div>
<div class="clear"></div>
</div>
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.
My fiddle:
http://jsfiddle.net/yJdbF/17/
HTML:
<div class="container">
<div class="content">
<div class="span70">
DDDDD
</div>
<div class="span30">
FFFFFFFFFF
</div>
</div>
</div>
CSS:
.container {
margin-top : 65px;
}
.content {
border : 10px solid green;
}
.span30 {
width: 40%;
background-color : red;
float : left;
}
.span70 {
width: 60%;
background-color : blue;
float : left;
}
The div.span70 and div.span30 are not fully contained inside div.content. span* divs are floated divs (which are tricky).
how can I fully contain them inside??
If you put
overflow: hidden;
on your .content class, then it works.
You need to clear your floats. For example with Nicolas Gallagher micro clear-fix or simply with an overlow: hidden
.content {
border : 10px solid green;
overflow: hidden;
}
DEMO
You should add a clearfix see updated fiddle.
Css
.clear {
clear:both;
}
Html
<div class="container">
<div class="content">
<div class="span70">
DDDDD
</div>
<div class="span30">
FFFFFFFFFF
</div>
</div>
<div class="clear"></div>
</div>
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