i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it..
basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
demo : http://jsfiddle.net/S8RC3/
By simply removing 100% from the DIV elements.
DEMO
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
DIV as being a Block level element is already wide as it's parent container.
Additionally you have a typo: </br> should be <br />, <br/> or <br>
For your padding and border, use box-sizing: border-box;.
Related
I have the following code:
<div style="display: table; border: 1px solid green;">
<div style="display: table-cell; width: 1%; max-width: 1000px; background: red; height: 30px;"></div>
</div>
Changing the width property has completely counter-intuitive consequences.
A bigger example of this behavior: http://jsfiddle.net/8DUfr/2/. How is the width of the red rectangle calculated?
You were using width: percentage%; in the wrong div. You put it in the parent div for each red bar. I fixed your JSFiddle.
http://jsfiddle.net/8DUfr/4/
<h3>1%</h3>
<div style="display: table; border: 1px solid green; width: 1%">
<div style="display: table-cell; max-width: 1000px; background: red; height: 30px;"></div>
</div>
The box model in CSS has traditionally worked this way:
Given width w, the actual visible width of the box is calculated by adding w to the left and right padding of the element plus the left and right border. The width specified via the CSS width property, in modern browsers only tells CSS how wide the content area should be. See W3C documentation for an example.
For illustration purposes, let's say you have the following:
HTML
<div class="box">Something here</div>
CSS
.box {
width: 100px;
border: solid 1px red;
padding: 2px;
}
The visible width of .box is actually: 100 + 2 * 1 + 2 * 2 = 106px. To make the box measure exactly 100px, you have to subtract 6px from the specified width to compensate.
HTML
<div class="box-adjusted">Something here</div>
CSS
.box-adjusted {
width: 94px;
border: solid 1px red;
padding: 2px;
}
With the advent of CSS3, we now have the box-sizing property. The value that makes the width work as we expect is border-box.
HTML
<div class="box2">Something here</div>
CSS
.box2 {
width: 100px;
border: solid 1px red;
padding: 2px;
box-sizing: border-box;
}
See fiddle: http://jsfiddle.net/nnN6t/3/
I'm having a hard time to solve how to accomplish this parent div is full width:100% with specific height:500px then I want the child DIV with specific width and height let's just say width:980px;height = the height of parent DIV then that parent DIV will be divided into 3 columns. how to accomplish that?
sample image:
GREEN : Parent DIV with full width.
BLUE: Child DIV divided into 3 columns
Thank you in advance!
Take a look at this.
<div id="parent">
<div id="child">
<div class="grandchildren">
</div>
<div class="grandchildren">
</div>
<div class="grandchildren">
</div>
</div>
</div>
style
div#parent {
width: 100%;
height: 200px;
background-color: green;
}
div#child {
height: 200px;
width: 300px;
background-color: blue;
margin: 0 auto;
display: table;
}
div.grandchildren {
border: 1px solid yellow;
display: table-cell;
}
EDIT: a sample without using table styles but using float instead
I took too long to answer I guess :) here's another jsfiddle, this one's responsive:
http://jsfiddle.net/LmHjU/2/
<div class="green_block">
<ul class="blue_block">
<li></li>
<li></li>
<li></li>
</ul>
</div>
And the css:
.green_block{
background: #22B14C;
width: 100%
}
ul.blue_block{
background: #00A2E8;
border: 3px solid #4DBDF3;
height: 500px;
list-style: none;
margin: 5px auto;
padding: 0;
width: 80%; /* or whatever width you need */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
ul.blue_block li{
border-right: 3px solid #5E8899;
float: left;
height: 100%;
width: 30%;
}
ul.blue_block li:last-child{
border-right: none;
}
Cheers!
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)
I am looking to overlay a caption on to an image. I have managed to do this, but the image is expanding out of the parent div.
I have the containing div set to inline-block, as I want it to 'auto size', not take up width: 100%. If you look at the current output, you'll see the image could be within the black bordered box.
It only needs to work in Chrome, if you encounter cross-browser issues.
Thanks in advance!
LIVE DEMO
CSS:
#body_content {
border: solid 1px blue;
display: inline-block;
padding: 5px;
}
#body_header {
border: solid 1px red;
font-size: 25px;
padding: 5px;
}
#body_image {
position: absolute;
}
#body_image_caption {
color: white;
line-height: 30px;
margin-left: 10px;
}
#body_image_container {
background: white;
border: solid 1px black;
margin-top: 3px;
padding: 10px;
}
#body_image_overlay {
background-color: black;
bottom: 5px;
display: block;
height: 30px;
opacity: 0.85;
position: absolute;
width: 100%;
}
HTML:
<div id="body_content">
<div id="body_header">
Heading
</div>
<div id="body_image_container">
<div id="body_image">
<img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
<div id="body_image_overlay">
<div id="body_image_caption">
Some Text
</div>
</div>
</div>
</div>
</div>
The #body_image element is escaping from the #body_image_container because its position is set to absolute. Absolutely positioned elements are removed from the document's flow, causing parent elements to collapse as though the child element wasn't there. If you change it to relative, then it becomes contained within the black box:
#body_image{
position: relative;
}
http://jsfiddle.net/AaXTm/2/
Try this css in parent div.
Overflow:auto
Check this fiddle. You need to set the position of the child element of the image to be absolute and the parent element to be relative. Change the width of the caption accordingly.
child-element {
position:absolute;
}
parent-element {
position:relative
}
http://jsfiddle.net/AaXTm/4/
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model