I have a max-width wrapper, within it are four boxes of a fixed width and height. When the browser window is reduced, the boxes fall inline and centered within the container, but the alignment is slightly out, as if there's a small left margin.
Here is a jsfiddle: http://jsfiddle.net/ve2fyrh7/
If I remove "text-align:center;" from #boxcontainer it clears up the alignment issue, but then the boxes won't be center-aligned inside the container which I require when the browser window is reduced.
If I remove ".box:last-child" then that also solves the alignment issue, but then all four boxes won't be inline when the browser window is >960px.
I appreciate any help/suggestions on where I'm going wrong.
CSS
#wrapper {
max-width:960px;
margin:0px auto 0px auto;
}
#boxcontainer {
width:100%;
background:#f8f8f8;
font-size:0;
text-align:center;
}
.box {
width:225px;
height:200px;
display:inline-block;
background:#ccc;
font-size:18px;
margin:0px 20px 20px 0px;
}
.box:last-child {
margin-right:0px;
}
HTML
<div id="wrapper">
<div id="boxcontainer">
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
</div>
</div>
Add float:left to your box class.
If you want to solve this on a specific media device use media query.
The margin-right:0px; on the the last div is causing the spacing issue. If i remove that, it seems to be fine. http://jsfiddle.net/ve2fyrh7/2/.
Related
See the HTML and CSS below.
When the h1 tag is uncommented, a scrollbar is added to the page, but I don't know why. I suspect it's because the cards have position:fixed, but I don't know how to get them to look like that any other way besides position:fixed.
I would like the title div to take up 20% of the screen and the card-conveyor-belt div to take up 80% of the screen, regardless of their contents. How can I go about doing this?
HTML:
<body>
<div class="title">
<!--
<h1>
HELLO
</h1>-->
</div>
<div class="card-conveyor-belt">
<div class="card left"></div>
<div class="card center"></div>
<div class="card right"></div>
</div>
</body>
CSS
html,body{
height:100%;
margin:0;
padding:0;
background-color:#ccc;
}
.title{height: 20%;width: 100%;}
.card-conveyor-belt{
height: 80%;
width: 100%;
}
.card{
position:fixed;
width:80%;
height:80%;
background-color:white;
border-radius:5px;
}
.center{
left:10%;
}
.left{
left:-78%;
}
.right{
left:98%;
}
Here is the same code in a jsfiddle if you'd like to run/interact with it.
Simply use margin: 0 to fix your problem:
Jsfiddle: https://jsfiddle.net/dj3mabgz/
h1 {
margin: 0;
}
Like the other answer stated, the issue is with the margin on the <h1> tag. By default (at least in Chrome it is default, not certain about other browsers), all <h1> tags have a default margin top value of 0.67em.
Now, since you didn't define where you wanted to position the block inside your .title block, it automatically positioned it at the top. So the result is as you can see in the picture;
The default margin and the default positioning ends up "pushing" all of the content down and forcing the scrollbar to appear.
Being more of a backend developer, I'm finding myself having some trouble with the header I'm working on (HTML/CSS only). Fiddle: http://jsfiddle.net/yoom1jvw/
.container{
margin:0 auto;
text-align:left;
height:auto;
width:95%;
min-width:1000px;
max-width:2000px;
background-color:white;
}
As you can see the min-width of the container in 1000px before it stops responding to the change
My issue: The yellow box keeps collapsing under the grey box, and the grey box collapses under the green when responding to the width of the browser.
My Goal: Instead of the boxes collapsing under one another, I want the header to start removing the spaces in-between the boxes and also the search bar to slowly get smaller.
The search bar does respond a little, but I can't seem to figure out how to get the margins between the boxes to do the same. If anyone could point me in the right direction I'd really appreciate it!
NOTE: You will have to expand the fiddle quite a bit since we are dealing with wide resolutions.
Thanks!
short calculation with min-widths:
container= 1000px;
_________________________________
logo: 200px
search: 20% of container = 200px
btn-main: 200px
main-nav: 400px
login-box: 100px
---------------------------------
1100px + space between boxes
Your main problem is that you can't arrange about 1150px in a 1000px container ;)
Solution
If you can change some of the boxes widths to fit into the container. You could make the container "position: relative" so you're able to place your boxes in absolute positioning (in percentage) without the margin-left. For example if the width of main-nav would be 250px - http://jsfiddle.net/yoom1jvw/2/
I'm not too sure what you wanted.
However, I am sure you can change this to suit your needs
<!DOCTYPE html>
<html>
<head>
<style>
#header{
margin:0px auto;
width:95%;
height:80px;
background-color:blue}
.container{
display:block;
float:left}
.block{
display:block;
margin:0px auto;/*all blocks are centered in their container*/
max-width:100%}/*so a block can be greater than its container*/
#container1{width:20%}/*all the percentage must add up to 100%*/
#container2{width:20%}/*these are the widths of all the containers in %*/
#container3{width:10%}/*container3 is smaller than container4 by 20%*/
#container4{width:30%}
#container5{width:20%}
#block1{
background-color:black;
width:200px;
height:60px;}
#block2{
background-color:white;
width:300px;
height:50px}
#block3{
background-color:green;
width:100px;
height:70px}
#block4{
background-color:grey;
width:400px;
height:60px}
#block5{
background-color:yellow;
width:200px;
height:50px}
</style>
</head>
<body>
<div id="header">
<div id="container1" class="container"><!--container for block-->
<div id="block1" class="block"></div><!--Actual Block-->
</div>
<div id="container2" class="container">
<div id="block2" class="block"></div>
</div>
<div id="container3" class="container">
<div id="block3" class="block"></div>
</div>
<div id="container4" class="container">
<div id="block4" class="block"></div>
</div>
<div id="container5" class="container">
<div id="block5" class="block"></div>
</div>
</div>
</body>
</html>
Note: all containers could be the same % width, therefore you would not need all the extra ids
just make sure they add up to 100%
here is it live http://jsfiddle.net/6wpoecg3/
I have an issue and I can't find the right keywords on Google.. But it seems prettry "classic".
I have a webpage, let's say with a max-width of 1500px;
I want to add a line, with 5 "boxes" (div) of the same size each, separated with a margin.
So I set a width of 20%, and a margin-right of 10px. My issue is that my last div always goes down to the next line, because of the margin. (Because with the margin, the width of my line is higher than the max-width of the page).
If I remove the margin, all the boxes are correctly on the same line.
What should I do to make it work ? (Except using outerWidth of jQuery, it is my next step if I can't do it easily with css)
Here is my code the code I have now :
<div id="page">
<div id="numbers">
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
</div>
</div>
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
}
I also made a fiddle, to test : http://jsfiddle.net/jKMp5/
Thank you !
Solution : I just have to set the padding property on the .number, not the wrapper !
Or use box-sizing !
Thanks to everybody
Div's with a width percentage adds margins and paddings width on to that.
Meaning a div with width 50% amd margin-right: 20px; will be 50% + 20px.
You can do the following.
<div style="width: 20%;">
<div style="margin-right: 20px;"></div>
</div>
That will sort it out.
or just the following
.number
{
background-color:white;
padding-right:10px;
}
.numberwrap
{
float:left;
width:20%;
}
The problem is (as you already said) that the margin is affecting to each div making it bigger than that 20%, so one solution could be to tell to that div that the margin is included in the total width with the property box-sizing
So add:
.numberwrap {
box-sizing: border-box;
}
See jsFiddle example: http://jsfiddle.net/jKMp5/2/
In the default box modal,
The padding area extends the content area with the empty area between the content and the eventual borders surrounding it.
You can change this behavior using box-sizing property by applying box-sizing:border-box
border-box:
The width and height properties include the padding and border, but not the margin.
.numberwrap
{
box-sizing:border-box;
/*other styles*/
}
Demo
You can use disaply:table and display:table-cell:
css
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
display:table-cell;
/*border: 1px solid black;*/
}
#numbers{
display:table;
}
fiddle
jsFiddle
I am trying to get these 4 divs to sit on the same vertical line. Why does the presence of buttons change the position of the first div?
HTML
<div class="box">
<button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
CSS
.box {
width:200px;
height:200px;
padding:10px;
display:inline-block;
border:1px solid black;
text-align:center;
}
RESULT
Add vertical-align:bottom to the style of your divs.
The cause of your problem is the presence of any content, as it defines the baseline for the div.
Adjusting the css like this works
.box {
width:200px;
height:200px;
padding:10px;
border:1px solid black;
text-align:center;
}
div.box{display:inline;float:left;}
jsFiddle solution
Just change the display property of the div's and they'll align vertically:
display: block
Edit: #ben said he wanted the div's aligned vertically. Vote me down if you must, but it's not my fault if he didn't know the difference between horizontal and vertical.
I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo