It seems as though when I use float or inline-block on elements, their margin or padding gets doubled. To illustrate this, the margin between the middle and bottom sections is 5%. However, the size of the top section is also 5%, and the top section is half as large as the bottom section.
When I was checking the JSFiddle and re-sizing the window I noticed that the top section does not scale in terms of height relative to the width of the window of the screen, but the vertical margin does.
Any fix or explanation would be appreciated.
html {
overflow-y: scroll;
}
* {
margin: 0px;
padding: 0px;
border: none;
}
div {
outline: black solid 1px;
}
.top {
position: fixed;
width: 100%;
height: 5%;
}
.section {
float: left;
width: 20%;
height: 100%;
}
.left {
float: left;
vertical-align: top;
width: 25%;
margin: 5% 0px;
}
.left1 {
float: right;
width: 80%;
}
.left2 {
float: right;
width: 80%;
}
.right {
float: left;
vertical-align: top;
width: 75%;
margin: 5% 0px;
}
.right1 {
float: left;
vertical-align: top;
width: 66.66666%;
}
.right2 {
float: left;
vertical-align: top;
width: 33.33333%;
}
.right21 {
width: 80%;
}
.right22 {
width: 80%;
}
.bottom {
width: 100%;
}
<div class="top">
<div class="section">top section 1
</div>
<div class="section">top section 2
</div>
<div class="section">top section 3
</div>
<div class="section">top section 4
</div>
<div class="section">top section 5</div>
</div>
<div class="left">
<div class="left1">left 1
</div>
<div class="left2">left 2</div>
</div>
<div class="right">
<div class="right1">right 1
</div>
<div class="right2">
<div class="right21">right 2 1
</div>
<div class="right22">right 2 2</div>
</div>
</div>
<div class="bottom">
bottom
</div>
JSFiddle:
https://jsfiddle.net/9c8uoz0q/
That's because your .top is in fixed position and your .bottom is floating.
Clear the float for your .bottom and remove the fixed position for you .top and you should see that it scale like you meant to.
Fiddle
Related
I have two elements where one of them is floated to left and other is floated to right and its content is textarea element. Their width is set to 30% and 60%. It looks ok, but when I resize textarea, parent element resizes in strange way. Textarea goes beyond parent.
Here's a simple example:
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
JSFiddle
What is the reason of that strange behavior and what can I do to fix it without modifying HTML code?
Solution: 1
You can set max-width: 100% to textarea so that it will not go beyond the div
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
.right textarea {
max-width: 100%;
}
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
Solution: 2
You can set resize: none; to teaxtarea so that it can't be resized. You can add height and width of the textarea as per your requirement
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
.right textarea {
max-width: 100%;
resize: none;
}
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
https://jsfiddle.net/0Lq3ks4g/50/
.wrapper {
border: 3px double gray;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
Try removing display:inline-block from .wrapper. Then parent will also expand when textarea expands
From this JSFiddle, you can see that I have a footer.
I would like to align the content within each column so that the container is centered, but the text still aligned left.
HTML:
<div class="left">
<div class="align">
<h6>Facebook</h6>
<h6>Twitter</h6>
<h6>Blog</h6>
</div>
</div>
<div class="right">
<div class="align">
<h6>Privacy Policy</h6>
<h6>Terms of Service</h6>
<h6>Help</h6>
<h6>Contact Us</h6>
</div>
</div>
CSS:
div {
width: 50%;
}
.left {
float: left;
}
.right {
float: right;
}
.align {
display: table;
margin: 0 auto;
}
Any suggestions? Thanks.
Please check this
.left {
width: 50%;
float: left;
background-color: white;
}
.right {
width: 50%;
float: right;
background-color: black;
color: white;
}
.hor-center {
display: table;
margin: 0 auto;
}
<div class="left">
<div class="hor-center">
<h6>Facebook</h6>
<h6>Reddit</h6>
<h6>Instagram</h6>
</div>
</div>
<div class="right">
<div class="hor-center">
<h6>Terms</h6>
<h6>F&Q</h6>
<h6>Email</h6>
</div>
</div>
You need to set a width on a block level container and give it margin: 0 auto;. You can change the 0, which controls top and bottom margins, but the key is having a definite width with auto left and right margins.
I am attempting to position two elements in the center of their given space regardless of the size of the page.
Example
https://jsfiddle.net/57q9dn78/
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.right {
float: right;
margin-right: 75px;
}
.left {
float: left;
margin-left: 75px;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
In the example the #parent div is set to 500px and the others have margins based on that. Normally parent would be 100% width. This is just an example of what I wanted. Is there a way to use calc or something else in CSS so as the page changes in size the margin changes or goes away entirely based on the face that each child is 100px.
You could use flexbox:
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
display: flex;
justify-content: space-around;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Just make the children's container 50%
.child {
height: 20px;
width: 50%;
float:left;
text-align:center;
}
.child span {
background-color: #ff0000;
}
https://jsfiddle.net/foreyez/xqvffyqj/
Just change the margin to 15% instead of 75px, which is 75px/500px:
.right {
float: right;
margin-right: 15%;
}
.left {
float: left;
margin-left: 15%;
}
Here is a working example
.child-holder {
width: 50%;
float: left;
}
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
margin: auto;
max-width: 100%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
}
<div id="parent">
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
</div>
Before posting this I attempted to delete the question because none of the given answers handled the responsive design requirement. So, giving that parent needs to be 100%, you can make 2 boxes of 50% width and the auto margin on the child will allow the children to be centered within their respective spaces regardless of the size of parent or page.
Here is 2 simple variants, the first having fixed width and margin left/right (using your sample fixed width's), the second with fluid and translate left/right.
The middle for 2 element is 33% and then you reduce with 66% of their width.
If one want them centered at 25%, just change to 25% and reduce with 50%.
Snippet fixed width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
margin-left: calc(33.3% - 66.6px);
}
.right {
float: right;
margin-right: calc(33.3% - 66.6px);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Snippet fluid width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
position: relative;
left: 33.3%;
transform: translateX(-66.6666%);
}
.right {
float: right;
position: relative;
right: 33.3%;
transform: translateX(66.6666%);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
min-width: 200px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
I have a div on the left side and on the right side, both fixed width. I have a middle div witch is also fixed width. I want the middle div to stay in the middle of left and right div no matter screen reslolution, so the space from left to mid div and space from mid to right div shold be the same allways. How can i do that?
This is what i got so far:
HTML:
<div id="container">
<div id="left">
</div>
<div id="content">
</div>
<div id="right">
</div>
</div>
CSS:
div{
border: 1px solid black;
height: 200px;
}
#container{
width: 100%;
}
#left{
width: 50px;
float: left;
}
#content{
width: 150px;
float: left;
margin: 0 auto;
}
#right{
width: 100px;
float: right;
}
http://jsfiddle.net/Y5ZCT/
You can position the left and right divs absolutely and have the center div in the middle.
HTML
<div id="container">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
CSS
div {
border: 1px solid black;
height: 200px;
}
#container {
width: 100%;
position: relative;
}
#left {
width: 50px;
position: absolute;
left: 0;
top: 0;
}
#content {
width: 150px;
margin: 0 auto;
border:1px solid #f00;
}
#right {
width: 100px;
position: absolute;
right: 0;
top: 0;
}
JSFiddle