Why does my parents div "dad" not take the height of its children?
http://jsfiddle.net/MeHyJ/
<div id="dad">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
<div class="float">4</div>
</div>
#dad {
height:100%;
width:100px;
border:1px solid black;
}
.float {
width:50px;
height:50px;
background-color:red;
float:left;
}
Use display:inline-block rather than using
float:left; clear:both;.
Task : Figure out the difference between display: block/inline/inline-block;
DEMO & CODE
It is a well-known issue of floated elements.
You need so-called clearfix method: http://css-tricks.com/snippets/css/clear-fix/
#dad:after {
content: "";
display: table;
clear: both;
}
or make a class that you can reuse later in your code:
.clrfx:after {
content: "";
display: table;
clear: both;
}
Your updated DEMO
Please change the css of id #dad as below:
#dad {
float:left;
height:100%;
width:100px;
border:1px solid black;
}
Related
I have a side by side 50% divs. Under I have a content div where I have applied a margin-top 60px. That margin is not working.
<div class="sbs50">
Left Side
</div>
<div class="sbs50">
Right Side
</div>
<div class="content-section">
Content Section
</div>
Css
.sbs50
{
float: left;
width: 50%;
}
.content-section
{
margin-top: 60px;
border: 1px solid green;
}
I tried adding the following but is not working
.sbs50:after
{
content:'';
display:block;
clear: both;
}
How can I fix the margin not working?
Here is my fiddle
Just add the margin to the bottom of the sbs50 class and clear the floats for .content-section class. Like this:
.sbs50 {
float: left;
width: 50%;
margin-bottom:50px;
}
.content-section {
border: 1px solid green;
display:block;
clear: both;
float:none;
background:#ccc;
}
See fiddle
Alternative:
Use the typical clear method, basically you add a div which clears every float. So your HTML looks like this:
<div class="sbs50">Left Side</div>
<div class="sbs50">Right Side</div>
<div class="clearfix"></div><!-- added div -->
<div class="content-section">Content Section</div>
and your CSS like this:
.sbs50 {
float: left;
width: 50%;
}
.clearfix {
display:block;
clear: both;
float:none;
}
.content-section {
border: 1px solid green;
margin-top:200px;
background:#ccc;
}
See fiddle for this example
This is a more common approach since you simply clear elements and then style the subsequent elements as you wish, but you can use any of these approaches and they will work equally well
This works:
.content-section {
margin-top: 20px;
border: 1px solid green;
float: left;
width: 100%;
}
but I am not sure if you want to set the width yourself.
How can I apply clear both to wrap inside elemets in my container
JSFDDILE
.container{
background:blue;
}
.box{
float:left;
width:75px;
height:75px;
margin:5px 5px;
background:red;
}
.box:after{
clear:both;
}
I want the boxes to be warpped by container!
Thanks
You can do it this way:
Fiddle
.container:after{
clear:both;
content: " ";
display: block;
}
OR
Remove float and use display: inline-block
Fiddle
.box{
width:75px;
height:75px;
margin:5px 5px;
background:red;
display: inline-block;
}
I am trying to make a UL or DIV's where each list item / child div is full screen (100% width 100% height) and floated left so i can scroll horizontally through them, any idea how I can do this? here is my code but it is not working as I had thought
HTML:
<html>
<body>
<div id="site-holder">
<div class="toronto-full">
TESTING
</div>
<div class="montreal-full">
TESTING
</div>
</div>
</body>
</html>
CSS:
html { width:150%; height:100%; margin:0; padding:0; }
body { width:150%; height:100%; margin:0; padding:0; }
#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }
.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }
Any Ideas?
FIDDLE
Try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#site-holder {
width:100%;
height:100%;
margin:0;
padding:0;
white-space: nowrap;
font-size: 0;
}
.toronto-full, .montreal-full {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: top; /* this line added in edit */
font-size: initial;
}
.toronto-full {
background: green;
}
.montreal-full {
background: red;
}
EDIT:
Review the code again. I added a line which fixes the problem with vertical mismatch of the divs.
Why do you even want to use float for this?
You could use inline-block display;
.toronto-full {
background-color:green;
width:50%;
height:100%;
display: inline-block;
}
.montreal-full {
background-color:red;
width:50%;
height:100%;
display: inline-block;
}
Example: http://jsfiddle.net/7DxFE/
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;
The result on chrome and ie10 are work, but not work on firefox.
I would like to add the shadow background at the bottom of div
please take a look on this
http://jsfiddle.net/yokosatan/mv83a/
Here is the code of HTML
<div class="box">
<div class="logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
</div>
<div class="name">Name</div>
</div>
And CSS code
.box
{
text-align:center;
width:105px;
}
.name
{
font-size:11pt;
margin-top:8px;
text-transform:uppercase;
}
.logo
{
width:105px;
height:105px;
background:white;
display: table-cell;
vertical-align: middle;
position:relative;
}
.logo:after
{
content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
bottom:-15px;
display:block;
height:15px;
}
.logo img
{
margin:0 auto;
max-width:85%;
width:85%;
max-height:85%;
}
Question is how to do the same result as chrome or ie that display.
Additional, it could be other solution that give the same result for all web browsers.
Thank you
Update: I think the cause is that I make display
display:table-cell;
I change to be display block and it's work, but I want to make logo to be center vertically.
What should I do?
Instead of using content: url(); use content: ' '; and use background-image and it should work for you
Demo
.logo:after {
content:' ';
height: 15px;
width: 100px;
background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
top: 110px;
display:block;
background-repeat: no-repeat;
}
Edit:
As you had issue using display: table-cell;, you can use display: block; instead and use position: absolute; for the img tag and use top and left with custom values to set the image vertically middle.
Demo
use content as ""
and add background
.logo:after
{
background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
}