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;
}
Related
I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be 2px too small.
What is the best way to go about fixing this?
Goal:
I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with border-box the child div is smaller and thus doesn't align.
html
<div class="container">
<div class="diagonal"></div>
</div>
css
* {
box-sizing: border-box;
}
body {
background-color:red;
}
.container {
width:1170px;
margin:0 auto;
margin-top:200px;
height:700px;
position:relative;
z-index:3;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
border-width:0 1px 1px 1px;
}
.diagonal {
width:100%;
height:400px;
transform:skewY(-10deg);
position:absolute;
top:-200px;
left:0;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE;
border-width:0 1px;
z-index:-1;
}
JSFiddle
I think you're looking for this:
* {
box-sizing: border-box;
}
This property tells the browser to account for any border and padding in the value you specify for width and height
EDIT :
If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border.
I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;
body {
background-color: red;
}
.container {
width: 1170px;
margin: 0 auto;
margin-top: 200px;
height: 700px;
position: relative;
z-index: 3;
background-color: white;
border-style: solid;
border-color: transparent black black black;
border-width: 0 3px 3px 3px;
}
.diagonal {
width: 100%;
height: 400px;
transform: skewY(-10deg);
position: absolute;
top: -200px;
left: -3px;
background-color: white;
border-style: solid;
border-color: transparent blue;
border-width: 0 3px;
z-index: -1;
}
<div class="container">
<div class="diagonal"></div>
</div>
I have the following html structure:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
The parent is positioned absolutely, child1 and child2 are displayed side-by-side using inline-block.
I need this whole thing to be responsive based on the width of the 2 children divs. the problem is, if I increase the width of any of them, the parent's width remains the same. Changing its position to relative fixes this, but I have to have it in absolute.
Is there anyway to get it to be responsive?
EDIT:
I was hoping for this to be simple, but apparently not so much... :(
here's the actual HTML:
<div class="action_container">
<div class="action_inner">
<div class="action_title">Format Text</div>
<div class="action_body">
<div class="action_args_section"></div>
<div class="action_output_section"></div>
</div>
</div>
</div>
And the CSS:
<style>
.action_container {
display: block;
position: absolute;
}
.action_inner {
border: 1px solid black;
}
.action_inner {
min-width: 120px;
min-height: 50px;
background-color: white;
border: 1px solid #666;
border-radius: 5px;
}
.action_title {
font-size: 12px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.action_args_section {
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
}
.action_output_section {
display: inline-block;
width: 50px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
}
</style>
.parent{
position: absolute;
display: table;
}
.child{
position: relative;
display: table-cell;
}
Use this trick to set children in single line and parent to get width from them. Don't apply floats to nothing. And remember about white-space: nowrap; if You need to keep single line in child elements.
Here is fiddle.
.parent {
position:absolute;
height:50px;
border:1px solid red;
}
.child1 {
width:100px;
height:30px;
border:1px solid green;
}
.child2 {
width:150px;
height:30px;
border:1px solid blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Is this what you're looking for?
JSFiddle
.parent{
position:absolute;
left : 60px;
top : 60px;
width : auto;
height:auto;
border:1px solid black;
}
.parent .child{
display:inline-block;
border:1px solid blue;
}
<div class="parent">
<div class="child">aaaaaassssssssssssss</div>
<div class="child">sssssssccccccccccccccccccc</div>
</div>
Try use a max-width to set a maximum width for the parent div so it doesn't get wider than specified.
I did this easily. Changing the width of the divs changes the parent as well.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
div{border:1px solid black;}
.parent{
position:absolute;
width:auto;
height:auto;
}
.child1{
display:inline-block;
width:40px;
height:40px;
}
.child2{
display:inline-block;
width:30px;
height:40px;
}
</style>
If you want a responsive design, make sure you're using percentages, and not pixel values because the size of the divs will be calculated by the viewport width.
If you just want the parent to resize based on the absolute sizes of the child divs, add height:auto; width:auto to the parent. Then, change the child divs to display:block; float:left. The parent will resize accordingly.
Updated CodePen Demo
CSS
.action_container {
display: block;
position: absolute;
height:auto;
width:auto;
}
.action_inner {
border: 1px solid black;
}
.action_inner {
min-width: 120px;
min-height: 50px;
background-color: white;
border: 1px solid #666;
border-radius: 5px;
}
.action_title {
font-size: 12px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.action_args_section {
display: block;
float:left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
width:300px;
border: 1px solid red;
}
.action_output_section {
display: block;
float:left;
width: 150px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
border: 1px solid blue;
}
see the sample solution here in jsfiddle link
using this css:
.parent{
position:fixed;
background-color:blue;
height:auto;
width:auto;
}
.child1{width:200px;background-color:black;height:200px;float:left;}
.child2{width:200px;background-color:red;height:200px; float:left;}
if it is not what you're looking for,you can edit your css here then we can help
.parent{
float: left;
posetion: absolute;
background-color: yellow;
width:auto;
height: auto;
}
.parent div{
float: left;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
<div class="parent">
<div class="child1">this</div>
<div class="child2">this</div>
</div>
Here's The Code You Need :)
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.
I need your help,
How can the CSS code below be modified, such that I would be able to have a parent (container) div at 100% width while the 2 inner divs are 70% and 30% width inside the box? As it stands now, it seems that the 2nd div is pushing out of the container div?
<style type="text/css">
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
}
</style>
<div id="outerdiv">
<div id="innerdiv1">
</div>
<div id="innerdiv2">
</div>
</div>
SOLUTION :
I updated your CSS code in this FIDDLE
EXPLANATION :
The 1px border you put around the inner-divs increases the with of these divs to prevent that and include the border in the CSS width property, You can use box-sizing:border-box; with float:left on both inner divs.
You can learn more about box-sizing property here
CSS :
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
box-sizing:border-box;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
float:left;
}
for one your innderdiv2 needs float: left; in the code you provided, but besides that it looks like you're experiencing the pains of the box-model. Your divs are indeed 30% and 70% width of the parent container, however they each have a 1px border, which causes them each to be 2px too large. Try using box-sizing: border-box;. I generally do something like this:
*,
*:before,
*:after {
box-sizing: border-box;
}
See here:
JSFiddle
The 1px borders push the divs past 100%, because they add to the overall width.
Use -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; on your inner divs so you can add attributes such as padding and borders without contributing extra to the dimensions.
Borders increases the size of the element you give it to.
Remove the borders and it should work like you want it to.
And you dont need the double-width.
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
background-color:blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
background-color:red;
width: 70%;
}
#innerdiv2 {
height:300px;
background-color:green;
width: 30%;
}
JSFiddle
on your innserdiv2 you can use a margin-left attribute as well to fix this...
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
margin-left:70%;
}
and you dont need to have a width:100% on #containerdiv. jsut have width:100% in #outerdiv.
your #innerdiv1 looks like
#innerdiv1 {
height:300px;
float:left;
border: 2px solid red;
width: 70%;
box-sizing:border-box;
}
this takes care of your border from overflowing as well outside the div. hopefully this helps. I know you have alrdy accepted an answer.
I have a three column site that will display all three columns or just one. If it displays just one column, my example below is the column it will be displaying. This intro wrapper is the center column that needs to grow in the event that the columns to the left and right of this wrapper are not present. Specifically, the first div in the intro wrapper. The second div has a static image in it and should not change.
I've used min/max-width but the content never reaches the maximum but rather stays at the minimum.
.intro is the wrapper. The min-width for this wrapper should be 801px and can grow up to a max of 1200px. The first inner div (.intro-left) should be a minimum of 531px and can grow up to a maximum of 979px.
Can someone have a look and tell me where I'm going wrong?
Here is my code.
.intro{
float:left;
min-height:200px;
width:801px;
padding:10px 0;
}
.intro .intro-right{
display:inline;
float:left;
height:200px;
width:250px;
background:#ccc;
}
.intro .intro-right img{
height:190px;
width:240px;
margin:5px 0 0 5px;
border:1px solid #777;
}
.intro .intro-left{
display:inline;
float:left;
width:531px;
min-height:200px;
margin-right:20px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>test</p>
</div>
<div class="intro-right">
<img alt="" src="1.jpg">
</div>
</div>
display:table solves your issue,. here is the CSS, ive made some changes while testing that you may want to remove.. such as making the left div resizeable so that you can see it work in action.
div.intro {border:2px dotted red;
min-height: 200px;
max-width:1200px;
min-width:801px;
padding: 10px 0;
margin:0 auto;
display:table;
}
.intro-right, .intro-left{display:inline-block;vertical-align:top;}
.intro-right {
height: 200px;
width: 250px;
background: #ccc;
outline: 2px solid green;
}
.intro-right img {
height: 190px;
width: 240px;
margin: 5px 0 0 5px;
border: 1px solid #777;
}
.intro-left {
width: 531px;
height: 200px;
margin-right: 20px;
outline: 2px solid blue;
resize:both;
overflow:auto;
}