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>
Related
I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a lot.
#main {
position: relative;
}
#right {
float: right;
position: relative;
display: inline-block;
}
#left {
float: left;
position: relative;
displayLinline-block;
}
#subDiv {
position: relative;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
browser shows:
<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
what's my mistake?
You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>
It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-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>
How can I produce a div that will have the following layout so I could make its contents to adjust when is resized? How should i structure this, so I could make use of media queries? Do I need to have another div that will wrap all of this?
+-----------+---------------------------------------+
+ + Title +
+Image + Description +
+ + +
+-----------+---------------------------------------+
+Another container +
+ +
+---------------------------------------------------+
Update:
Used both answers and came up with
http://jsfiddle.net/EzV4R/10/
If you want to make the most of CSS3 and do away with inline styles (bad) and floats, try:
Demo Fiddle
It has the added benefits of:
Resizing with the page
Minimizing the cell containing the image to only the image size (width)
HTML
<div class='table'>
<div class='cell'>Image</div>
<div class='cell'>Title<br />Description</div>
<div class='caption'>Another container </div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.cell :first-child{
width:1%;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
border:1px solid black;
}
I always like to wrap structures but it is not necessary, so I would try this:
HTML
<div id="main" class="wrapper">
<div id="topleft" class="left"></div>
<div id="topright" class="right"></div>
<div style = "clear:both">
<div id="container"></div>
</div>
CSS
#main {size that you want}
#topleft {size that you want}
#topright {size that you want}
.left { float: left; }
.right { float: right; }
#container { width: 100% }
<div id="topleft" style="float:left">TOPLEFT</div>
<div id="topright" style="float:right">TOPRIGHT</div>
<div id="container" style="clear:both">CONTAINER</div>
Try this:
<div >
<div style="float:left width:50%">Image</div>
<div style="float:right width:50%">
<div >Title</div>
<div >Description </div>
</div>
</div>
<div style=" width:100%">Another container </div>
<div id="main">
<div id="logo"></div>
<div id="desc"></div>
<div id="clr"></div>
<div id="content"></div>
</div>
CSS :
#main {margin:0;padding:0;}
#logo {width:20%;float:left;}
#desc {width:80%;float:left;}
#clr{width:100%;clear:both;}
#content{width:100%;}
<section>
<div class="inlineImg">
<!-- image -->
</div>
<aside>
<h3>Title</h3>
<p>Description</p>
</aside>
</section>
<section id="other">Another Container</section>
CSS:
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
overflow: hidden;
background-color: green;
}
div.inlineImg {
background-color: blue;
width: 40%;
height: 100px;
float: left;
}
aside {
width: 60%;
height: 100px;
background-color: red;
float: left;
}
#other {
height: 100px;
}
JSFiddle
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
<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"