I'm using box-sizing property to align left div, right div and center div within container div. The div's are not aligning. Below is the code i have tried. I also tried using px. I am using Firefox to check.
I have also added in jsfiddle, http://jsfiddle.net/F9ds9/
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center{
-moz-box-sizing: border-box;
margin:12px;
float:left;
border:1px solid #000000;
width:60%;
}
</style>
</head>
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
</html>
border-box is not margin-box (which by the way does not exists :) so just remove margin:12px; or deal with it:)
In this demo I just modified margin:12px; for the center element to margin-top:12px; (just like the other elements). If you need the margin that you need to do some math regarding your element's widths!
_____ _____________ _____
20% 12px 60% 12px 20%
even using border-box ends up to a sum of 100%+24px
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center {
-moz-box-sizing: border-box;
border: 1px solid #000000;
float: left;
margin-top: 12px;
width: 50%;
}
The box-sizing:border-box or whatever box sizing you are using the box model is
width + padding + border = actual visible/rendered width of an element's box,
height + padding + border = actual visible/rendered height of an element's box.
See this demo https://css-tricks.com/box-sizing/#demo
adding excess margin to child will make this property useless
Please Check the fiddle
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
There are some things which you should know
Total:100% for the container
Left and right :20%
Center :60%
so total 100% will come inside the container
and on top of that you have given border
so it will add extra 6px for the three container making it exceed more than the 100% width of container so the right section will jump down.
And for center container you have not given margin top
Please refer CSS box modelling you will understand.
and use firbug in firefox for debugging it will be easier.
Related
I am developing a website. Now I am beautifying my website. Now I am having a problem with designing my website.
This is something what I want to achieve
As you can see in the higlighted area, there is a image and textarea in the div. I want to get it responsive. I mean, it will have the max-width, when the user low down the screensize, it will become smaller, but it has min-width. I mean the parent div is not fixed size. It will be changing.
But I always want them stay side by side. But the image will always have fixed size. It will never change no matter screen size is changing. But only the text input field will be responsive according to the parent. Here is my code:
This is my HTML
<div>
<div class="comment-form">
<img class="comment-avatar" src="/Images/user_avatar.png" />
<textarea placeholder='Please log in first' class="comment-textarea"></textarea>
</div>
</div>
This is my CSS
.comment-form{
padding:5px;
border:1px solid #CFD8DC;
width:100%;
min-width:280px;
max-width:490px;
}
.comment-avatar{
width:60px;
height:54px;
object-fit:cover;
border:1px solid #CFD8DC;
}
.comment-textarea{
width:86%;
display:inline-block;
border-radius:0px;
height:54px;
}
As you can see in the css, I am making comment-form responsive setting width to 100% with min-width and max-width. The avatar image will have the fixed size. The problem is setting the width of the textarea. I always want image and textarea side by side. I want textarea takes the rest of the form area. So I set its width with percentage. As you can see, now width is 86%. If I set it to 100%, form became something like below.
But with current code, I get like the first image. But when I resize the screen, it becomes something like this.
They are not side by side any more. So my current code is not responsive. What I want to make is I want image always fixed side and want textarea takes the rest or remaining area of form-container no matter what screen size is changed to.
Maybe , this helps... i just added box-sizing and used calc to calculate width of text area
.comment-form{
padding:5px;
border:1px solid #CFD8DC;
width:100%;
min-width:280px;
max-width:490px;
box-sizing: border-box
}
.comment-avatar{
width:60px;
height:54px;
display: inline-block;
border:1px solid #CFD8DC;
box-sizing: border-box;
}
.comment-textarea{
width: calc( 100% - 70px);
display:inline-block;
border-radius:0px;
height:54px;
display: inline-block;
box-sizing: border-box;
}
<div>
<div class="comment-form">
<img class="comment-avatar" src="https://upload.wikimedia.org/wikipedia/en/7/71/SmallTownSouthernMan.jpg" />
<textarea placeholder='Please log in first' class="comment-textarea"></textarea>
</div>
</div>
Working Fiddle
I have deleted the irrelevant css parts. The magic happens with border-box and padding from the outer container.
.comment-form{
position: relative;
width:100%;
padding-left: 62px;
min-width:280px;
max-width:490px;
box-sizing: border-box;
}
.comment-avatar{
position: absolute;
width:60px;
height:54px;
left: 0;
}
.comment-textarea{
width:100%;
height:54px;
}
With the avatar taken out of the normal flow by position: absolute you are able to set the textarea width to 100% and simulate the offset with padding on the outer form element.
Three steps:
Apply display:flex to the parent container
Give the img a fixed width
Give the textarea a flexible width using calc()
See:
.comment-form {
display: flex;
width: 60vw;
height: 84px;
border: 1px solid rgb(191,191,191);
}
.comment-avatar {
width: 60px;
height: 60px;
margin: 12px;
background-color: rgb(127,127,127);
}
.comment-textarea {
width: calc(100% - 96px);
margin: 12px 12px 12px 0;
border: 1px solid rgb(63,63,63);
}
<div>
<div class="comment-form">
<img class="comment-avatar" src="/Images/user_avatar.png" />
<textarea placeholder='Please log in first' class="comment-textarea"></textarea>
</div>
</div>
I guess display: flex should do the job just fine!
Btw. flexbox is a good thing looking into: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.comment-form{
padding:5px;
border:1px solid #CFD8DC;
width:100%;
min-width:280px;
max-width:490px;
display: flex; /* <-- right here :) */
}
.comment-avatar{
width:60px;
height:54px;
object-fit:cover;
border:1px solid #CFD8DC;
}
.comment-textarea{
width:86%;
display:inline-block;
border-radius:0px;
height:54px;
}
<div>
<div class="comment-form">
<img class="comment-avatar" src="/Images/user_avatar.png" />
<textarea placeholder='Please log in first' class="comment-textarea"></textarea>
</div>
</div>
This work for me, try:
<div>
<div class="comment-form">
<div class="comment-avatar">
<img src="/Images/user_avatar.png" />
</div>
<div class="textareawrap">
<textarea placeholder='Please log in first' class="comment-textarea"></textarea>
</div>
</div>
</div>
and in your css:
.comment-form{
padding:5px;
border:1px solid #CFD8DC;
width:100%;
min-width:280px;
}
.comment-avatar{
width:60px;
height:54px;
object-fit:cover;
border:1px solid #CFD8DC;
position: absolute;
}
.comment-textarea{
width:86%;
display:inline-block;
border-radius:0px;
height:54px;
margin-left: 80px;
}
try also to add to the comment-from display attribute like this:
.comment-form{
padding:5px;
border:1px solid #CFD8DC;
width:100%;
min-width:280px;
max-width:490px;
display:inline-flex
}
but notice that The values "flex" and "inline-flex" requires a prefix to work in Safari. For "flex" use "display: -webkit-flex", for "inline-flex" use "display: -webkit-inline-flex;".
Hi everyone my tutorial has a tree div for now. Header,container and footer. header is fixed. but if you check it in JSFiddle you see container div has a problem lags behind the header div i can not solv the problem. what can i do in my css code?
This is HTML code:
<div class="globalHeader">
<div class="globalheader-in"></div>
</div>
<div class="global_container">
<div class="container">
1 <br>2 <br>3 <br>4 <br>5 <br>
</div>
</div>
And CSS code:
.global_container {
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
}
.container {
float:left;
width:981px;
height:100px;
background-color:red;
}
.globalHeader {
width:100%;
height:40px;
position:fixed;
background-color:#2a3542;
z-index:99999;
}
.globalheader-in {
width:981px;
height:40px;
margin-left:auto;
margin-right:auto;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
Using a spacer
You can push the content of container down by adding a spacer element as the first child of the container.
.container:before {
content: ' ';
display: block;
height: 40px; /* equal to the height of the header */
}
WORKING DEMO.
Using top padding
You can also use padding-top for the container to achieve that:
.container {
width:981px;
height:100px;
/* other styles... */
padding-top: 40px;
}
WORKING DEMO.
However If you want to keep the height of the container as 100px, you should use box-sizing: border-box to calculate the height of the container including paddings and borders, as follows:
.container {
width:981px;
height:100px;
padding-top: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO
I would do it like this:
http://jsfiddle.net/8eSAU/5/
.global_container{
clear:both;
position: relative;
top: 40px;
}
It was not working, because you simply hid the text beneath the fixed element.
Kolay gelsin :)
Why not add:
position:relative;
top:40px;
To .global_container {
Demo Fiddle
This assumes you wish the header to scroll with the content, in which case all you need to do per the demo is offset the top of the content by the height of the header, so it initially displays below it.
A simple padding-top will take care of that.
JSFiddle
.global_container{
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
padding-top:40px; /* heigt of fixed header */
}
you can add padding-top to the .global_container or body
padding-top should be same as height of header.
Please find the link below for the Fiddle
Add the following to global_container class
position:absolute;
top:47px;
FIND FIDDLE HERE
Demo of problem on jsbin.com
I want the child, including it's padding and borders, to be fully contained in the parent.
I want a solution that allows me to specify the child's width as 100%, as in the demo.
Screenshot
HTML
<div class="container">
<div class="child">
some content
</div>
</div>
CSS
.container {
max-width:400px;
padding:0px;
border:1px solid green;
}
.child {
padding: 10px;
width:100%;
border:30px solid #f2f2f2;
text-align:right;
}
Use box-sizing: border-box. Include the -moz- prefix for Firefox which still requires it:
.child {
padding: 10px;
width:100%;
border:30px solid #f2f2f2;
text-align:right;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I have a small div with overflow:auto; but when the the scroll bar appears it covers up a great deal of the div. This can be avoided by using overflow:scroll;, but then you get the unsightly faded scroll bar when there is no overflow. Is there a way of putting the scroll bar outside of the div without using overflow:scroll;? Thanks.
here is a demonstration jsfiddle
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
}
<div class = "alphabet">abcdefgh<br>
ijklmnop<br>
qrstuvwx
</div>
If it's an option to use a container element around .alphabet, you can set the vertical scroll on that. I've added the <hr> to fake an always-visible bottom border that won't also go under the scrollbar.
HTML:
<div class="container">
<div class="alphabet">
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
</div>
</div>
<hr>
CSS:
.container{
overflow-y:auto;
overflow-x:hidden;
height:50px;
width:100px;
}
.alphabet{
width:100%;
overflow:visible;
box-sizing:border-box;
border:1px solid;
border-bottom:0;
}
hr{
margin:0;
height:0;
width:85px;
border:0;
border-bottom:1px solid;
}
With inner border: http://jsfiddle.net/Q32gG/1/
If you don't actually care about the scrollbar showing inside the border, you can drop the <hr> and add a full border to .container instead (http://jsfiddle.net/V3MbV/3/).
Instead of using and outside-scrollbar, why not to use some right padding as so
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
padding-right:15px;
}
Or if you prefer, using em units to match a character whatever size you are using
padding-right:1em;
PD: By the way there is a typo in your example. The period should be previous it should be .alphabet {
You can also use a combination of padding right and setting the width to 100% + 10px. Works like a charm.
.alphabet {
width: 100%;
box-sizing: border-box;
border: 1px solid;
border-bottom: 0;
// for outside scrollbar
width: calc(100% + 10px);
overflow-y: auto;
padding-right: 10px;
}
I have four elements each of whom's width is set to 25%. They fill the width of the page perfectly.
I want to put a 1px gap between each one. If I do this (margin-right: 1px; for example), the last element overflows onto the next line. How can I reduce the width of each element by 1px without calculating the width in pixels in the first place?
I have just found a solution myself, with the help of #Lubnah in the comments.
.tab-list li {
margin-right: -1px;
border-left: 1px solid #fff;
}
.tab-list li:first-of-type {
border-left: none;
margin-right: 0px;
}
You can use CSS calc but its browser support is sketchy:
width: calc( 25% - 1px );
width: -moz-calc( 25% - 1px );
width: -webkit-calc( 25% - 1px );
Width is calculated inside the container. Any padding or margins you set will be added to the width.
Set your width to 23% and your margin to 1%
Left margin (1) plus width (23) plus right margin (1) = 25. That, placed four times on the page will add up to 100.
You could cheat slightly by having an inner div inside each element with width auto and margin-right:1px
See this fiddle: http://jsfiddle.net/7R6zZ/
<div class="outer">
<div class="inner">1</div>
</div>
<div class="outer">
<div class="inner">2</div>
</div>
<div class="outer">
<div class="inner">3</div>
</div>
<div class="outer">
<div class="inner">4</div>
</div>
.outer {
width:25%;
float:left;
}
.outer .inner {
width:auto;
margin-right:1px;
background:#999;
min-height:300px;
}
Use box-sizing: border-box; and borders.
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
div {
width: 25%;
border-right: 1px solid right;
}
use box sizing as box-sizing:border-box
and use 1px right border with same color as background
.box{
width:25%;
box-sizing:border-box;
border-right: 1px solid "same color as your background"
}