I am practicing on web design and I noticed that the height of the parent div is somehow smaller than the child div.
here is my css code:
html,body{
background-color: #ecf0f1 ;
height: 100%;
padding:0px;
margin:0px;
}
#homeDisplay{
width: 850px;
height: auto;
border: 2px solid #7f8c8d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left:auto;
margin-right:auto;
padding:8px;
}
#signupForm{
text-align: right;
float:right;
width: auto;
height: auto;
border: 2px solid #7f8c8d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 8px;
}
It's because of the float: right in your #signupForm. This causes the div to be taken out of the floating of the document.
Put a
<div class="clear"></div>
with
.clear {
clear: both;
}
after the signup form.
You are using float:right for the inner content, so it is removed from the normal flow of the document and parent can't adjust it's size according to the content's size. Fix : set overflow:auto CSS property to the container.
Related
Why is the floated image being moved next to a paragraph inside of a div move outside of that div when I float other div elements?
For example, I have a div class with a paragraph in it and that when I float the image inside of that class it wraps around it the way I want?
.container {
margin:0px auto;
width: 1400px;
background-image: url(back.png);
padding-top:10px;
height: 2000px;
}
.main {
background-color: #f7f4f4;
margin-right: 600px;
box-shadow: 10px 10px 10px #705656;
border-radius: 10px;
border: 2px solid red;}
.green {
border: 2px solid blue;
width: 400px;
margin-right: 40px;
background-color: #8bed8f;
float: right;}
.aside {
background-color: #f47575;
width: 400px;
margin-right: 40px;
border-radius: 4px;
float: right;
clear: right;}
.trac input[type=button] {
background-color: #9b878b;
font: weight: bold;
font-size:15px;
color: white;
border-radius: 6px;
border: none;
padding: 20px 10px;
margin-left: 300px;
margin-top: 5px;}
.tmac {
float: left; }
If I understanded your problem (the question you asked is a bit messy), you have to consider that floating HTML elements wraps to the closest position relative container.
If you want to stick a float to a specific container, you just have to add to the CSS class of that container the rule position: relative
Needing to have 2 divs side by side
I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
http://www.w3schools.com/cssref/func_calc.asp
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{
margin:0;
}
.containersearch
{
border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width:100%
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
input[type=text]
{
position:relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image:
url('http://findicons.com/files/icons/2226/matte_basic/32/search.png');
background-repeat: no-repeat;
background-position: right;
background-color: white;
padding: 12px 20px 12px 10px;
}
input[type=text]:focus {
width: 100%;
}
<body>
<div class = "containersearch">
<form>
<input type="text" name="search" placeholder="Search.."/>
</form>
</div>
</body>
I have two div elements. Second is inside in first element.
In second I display some text. For second div I set height to auto and when I put more text in div height is greater. Also I set height for first div to auto, but first div has always same height.
How I can set height of DIV to be dependable of number of text rows?
<div class="first-div">
<div class="second-div">
</div>
</div>
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: auto;
min-height: 75px;
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Add overflow:hidden to .first-div.
You may want to check out this question: How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?
Demo 1
add overflow: auto to outer div (.first-div)
css
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: 100%;
min-height: 75px;
overflow:auto; /* added */
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Demo 2
or you can add div to the html and set its style as clear: both
css
.clear {
clear: both;
}
html
<div class="first-div">
<div class="second-div"></div>
<div class="clear"></div>
</div>
You can remove the min-height from your .first-div and apply overflow: hidden check out the fiddle, I think this is what you want.
In the .second-div you can change the height with min-height. In the fiddle I have it at 300px.
http://jsfiddle.net/wcnbq9xc/
im using this css code:
/* status update page style */
#content_wrapper {
display: inline;
width: 80%;
padding: 0;
margin: 0 auto;
}
#content_update {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
display: block;
float: right;
width: 230px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* FOOTER */
#footer {
width:100%;
height:580px;
position:absolute;
bottom:0;
left:0;
border-top:4px solid #ed1c24;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
but the divs are displaying behind the footer divs. i have created a fiddle here so you can see the html too - http://jsfiddle.net/wmrhC/
It's because you have set the footer div to be absolutely positioned at the bottom of the browser window with a height of 580px. This takes the div out of the regular document flow, which means other elements can start hiding behind it, and since it is 580px high, most other elements on the page will hide behind it. You could fix this by setting the z-index on the footer to -1, but that's probably not what you are after, as it would just mean that the div's will start floating over the top of the footer instead of behind the footer, and that still doesn't look pretty.
You should get rid of the absolute positioning which you have set currently, and maybe look at something like CSS sticky footer for an approach which will let you set a footer which sticks to the bottom of the page instead of to the bottom of the browser window.
When working with position: absolute or fixed you should always be aware that these elements can cover other parts of your site, and you have to manage their depth manually
You can do this using the z-index property.
Let's say that you would like that the footer part appears below all contents.
You could add the z-index property like this:
#footer {
/* other styles */
z-index: -1;
}
See it in action
Though note, that this only fixes the "content is displayed behind" problem. But looking at your page you have more positioning problems to solve.
As stated in other answers, it's because you've positioned your footer div to be fixed.
Something along this line (regarding HTML and CSS) should help for your page lay-out:
JSFiddle demo
This is the CSS (see the JS Fiddle for the full code):
...
.wrapper {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
background-color: #cccccc
}
.left1 {
position: relative;
float: left;
left: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.left2 {
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
background-color: #ccccff
}
.right {
position: relative;
float: right;
right: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.footer {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
margin: 10px 0px;
background-color: #cfcfcf
}
...
As you can see, none of these items are positioned absolute or fixed.
Be sure to check this link too, which explains how you can create a sticky footer:
CSS Sticky footer (As indicated by another answer).
In the .SalesPanel class, I have set it to 100% width. I have notice its over-lapping the padding on the right that I have set in content id.
See: http://jsfiddle.net/CBAE7/9/ and look at the right padding and compare it with left padding.
What causing this and how to fix?
Also I was expecting 3 div's on 1 row even using 100% width.. how to fix?
HTML:
<div id='content'>
<div class='SalesPanel'> One </div>
<div class='SalesPanel'> Two </div>
<div class='SalesPanel'> Three </div>
</div>
CSS:
#content {
width: 700px;
padding: 8px;
overflow: hidden;
background-color: white;
border: 1px solid #C8CCD5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.SalesPanel {
border:1px solid #dddddd;
height:30px;
float:left;
width: 100%
}
Try this jsFiddle example.
#content {
width: 700px;
padding: 8px;
background-color: white;
border: 1px solid #C8CCD5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.SalesPanel {
border:1px solid #dddddd;
height:30px;
width: 33%;
display:inline-block;
margin:0;
}
Change box-sizing property:
.SalesPanel {
/* your stuff */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Initial value of box-sizing for modern browsers is content-box. It means that width: 100% will affect only the content, not counting padding and borders (your case). By changing this property to box-sizing you will fit it in the container. The actual width of the content will be calc(100% - 2px).
It's CSS 3 property and supported by IE 8+ and all other modern browsers.
Also, seeing as you are using a static 3 of them, 33% width never hurt either.
.SalesPanel {
border:1px solid #dddddd;
height:30px;
float:left;
width: 33%;
}
Try this code:
.SalesPanel {
border:1px solid #dddddd;
height:30px;
float:left;
width: 33%;
display:inline-block;
}