I'm currently making a website where you can find results of Formula One races. To do so, I want to make a result page for each Grand Prix, where the results are being shown in 5 boxes next to each other. Like this:
1 2 3 4 5
But right now it looks like this
1 2
3
4 5
This is the HTML code I use:
<div id="wrap">
<div id="fp1">FP1</div>
<div id="fp2">FP2</div>
<div id="fp3">FP3</div>
<div id="qual">Qual</div>
<div id="race">Race</div>
</div> <!--End wrap div-->
And this the CSS I use:
#wrap{
width: 100%;
height: 600px;
background-color: #000;
border: 1px solid white;
}
#fp1{
width: 20%;
height: 600px;
background-color: #333;
float: left;
}
#fp2{
margin-left: 20%;
width: 20%;
height: 600px;
background-color: #666;
}
#fp3{
margin-left: 40%;
width: 20%;
height: 600px;
background-color: #333;
}
#qual{
margin-left: 60%;
width: 20%;
height: 600px;
background-color: #666;
float: right;
}
#race{
width: 20%;
height: 600px;
background-color: #333;
float: right;
}
Anybody who knows how to fix it?
please check this: http://jsfiddle.net/itz2k13/KAwEz/
#fp1{
width: 20%;
height: 600px;
background-color: #333;
float: left;
}
.....
You can use a generic class, since styles are repetitive. see this for efficient one: http://jsfiddle.net/itz2k13/KAwEz/1/
else you can follow inline-block method, and further in time column and display:flex will be usefull:
http://codepen.io/seraphzz/pen/IosFk
#wrap {
white-space:nowrap;
}
#wrap, .wrap {
/* for test */
height:200px;
overflow:auto;}
.wrap {
-moz-column-width:300px;
-webkit-column-width:300px;
column-width:300px;
}
#wrap div {
white-space:normal;
display:inline-block;
}
#wrap div , .wrap div {
/* for test */
width:300px;
height:100%;
background:#999;
}
<div id="wrap">
<div id="fp1">FP1</div>
<div id="fp2">FP2</div>
<div id="fp3">FP3</div>
<div id="qual">Qual</div>
<div id="race">Race</div>
</div> <!--End wrap div-->
<div class="wrap" >
<div id="fp1">FP1</div>
<div id="fp2">FP2</div>
<div id="fp3">FP3</div>
<div id="qual">Qual</div>
<div id="race">Race</div>
</div> <!--End wrap div-->
If you want no scroll, divide 100%/numbers of boxes (fine if window not too small :) )
cheers
One more thing i noticed other than float:left regarding structure is you can use margin-left without % and give common margin-left like 20px
Related
I want 100% wide divs containing images to go down my page.
On top of these divs, I want one 1210px wide div where I can put my content.
Example:
http://mudchallenger.com/a-responsivee.html
Question:
How can I get the blue box to touch the green box, while red box stays above the two?
Thank you!
I currently have this:
}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}
Use background-images to accomplish what you want. Just stack your divs and it should work just fine. If you want your content to span two containers with background images, that's a different story, but the example you cite doesn't do that.
Here's a fiddle giving close to an implementation of what you want. Just replace the container background-colors with background-images and you'd have what you want.
http://jsfiddle.net/CfZu4/
HTML:
<div class="container">
<div class="content">
Blah
</div>
</div>
<div class="container red">
<div class="content">
Blah
</div>
</div>
CSS:
.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}
EDIT: Scaled down version for fiddle:
http://jsfiddle.net/dc2bar/asy8Y/2/
HTML:
<div class="background-banner green">
<div class="main-content red">
<!-- content -->
</div>
</div>
<div class="background-banner blue">
</div>
CSS:
.background-banner {
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
}
.main-content {
position: relative;
height: 800px;
width: 70%;
margin: 0 auto;
z-index:2;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
EDIT yet again: removed invalid css rule.
I have 3 divs in wrapper. I want 2 of them to stick to top-left and they need to be under each other. Third div needs to stick to top-right, but doesn't stick to top.
This is how I tried to do it but failed: http://jsfiddle.net/TZ82X/
<div id="wrapper">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
<div id="nav">Navigation</div>
</div>
CSS:
#wrapper {
background: #CCC;
width: 500px;
height: 250px;
margin: auto;
}
#logo {
background: tomato;
width: 300px;
height: 20px;
float: left;
}
#motto {
background: sienna;
width: 300px;
height: 20px;
float: left;
clear: left;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
}
This is 1st fix with rearranging of divs in .html: http://jsfiddle.net/KJG9q/
<div id="wrapper">
<div id="nav">Navigation</div>
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
This is 2nd fix with another container div: http://jsfiddle.net/x98Mf/
<div id="wrapper">
<div id="logo-motto-container">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
<div id="nav">Navigation</div>
</div>
CSS:
#logo-motto-container {
float: left;
I don't want to rearrange elements in .html because I want them arranged properly for styling for mobile, I could go with another wrapper div but I want to know why the first method didn't work and if is there a fix for it without messing in .html and keeping template flexible (without position: relative)?
I have modified your fiddles so as to give you what you want to do.
The following link is the modified version of your first fix fiddle. I have just played with the css properties and not moved any of your html div's as you wanted.
Fiddle Link
#nav {
background: seagreen;
width: 100%x;
height: 40px;
}
Remove float: right; from #nav.
#nav {
background: seagreen;
width: 200px;
height: 40px;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
position: absolute;
}
Have a look at this example pen:
http://codepen.io/benpearson/pen/bHJke
Is it possible to get div Four and Five to move up beside div Two WITHOUT changing the HTML or using absolute positioning?
(I can't use contains as each div will be floated in different directions depending on screen size.)
.wrap {
background-color: #666;
max-width: 500px;
height: 200px;
margin: 0 auto;
}
.one {
background-color: #ddd;
height: 110px;
width: 25%;
float: left;
}
.two {
background-color: #ccc;
height: 55px;
width: 50%;
float: left;
}
.three {
background-color: #bbb;
height: 35px;
width: 50%;
float: left;
}
.four {
background-color: #aaa;
height: 20px;
width: 25%;
float: right;
}
.five {
background-color: #999;
height: 20px;
width: 25%;
float: right;
}
<div class="wrap">
<div class="one">
One
</div>
<div class="two">
Two
</div>
<div class="three">
Three
</div>
<div class="four">
Four
</div>
<div class="five">
Five
</div>
</div>
Does this work for you? http://codepen.io/anon/pen/bAzch
Just changed divs four and five to be display:inline-block; instead of float:right;
Sure, just put a container div around divs two and three and move their float and width properties to it instead.
HTML:
<div class="wrap">
<div class="one">
One
</div>
<div class="rowtwo">
<div class="two">
Two
</div>
<div class="three">
Three
</div>
</div>
<div class="four">
Four
</div>
<div class="five">
Five
</div>
</div>
CSS:
.rowtwo {
float: left;
width: 50%;
}
}
.two {
background-color: #ccc;
height: 55px;
}
.three {
background-color: #bbb;
height: 35px;
}
You can see it at: http://codepen.io/anon/pen/KABoC
Ben, the div's 4 and 5 will never start from the top 0 of wrapper, because the div 3 starts on the end of div 2. So 4 and 5 recognize the right-upper corner of div 3 as starting point. You must use position: absolute; .. no other choice as far as I know.
I have simple structure with container and inside boxes:
<div id="container">
<div class="block"></div>
// more blocks
<div class="block"></div>
</div>
What I would like to achieve is to center boxes inside this container but to pack them as much as possible in a one line. The same I can do using JS: http://jsfiddle.net/JhxSd/ but I would like to avoid that, and use only CSS. Is that possible?
#media queries
Use a set of #media queries to define different layouts for the grid based on the current screen size. The only part of the layout that needs to vary is the width of the grid wrapper.
For all practical purposes, this is the only CSS solution available at present. For an explanation of why #media queries are appropriate, and why other available CSS options won't work, see this answer.
JSFiddle Demo
The above demo has #media queries for screen sizes up to 1200px wide (more can be added as needed), and does not use JavaScript. The rendered width of #container is always 75% (not counting the border), and the grid is centered within #container.
Note: This solution requires adding a wrapper div around the blocks. In each #media query, the width of the wrapper is just enough to fit the number of columns appropriate for the current screen size. The fixed wrapper width is what allows the grid as a whole to be centered within #container. If editing the static HTML isn't an option, the wrapper div can be added when the page loads using jQuery.
HTML
<div id="container">
<div class="grid-wrapper">
<div class="block"></div>
...
</div>
</div>
CSS
#container {
width: 75%;
...
}
.grid-wrapper {
margin: 0 auto;
width: 70px; /* Default: 1 column */
}
#media (min-width: 200px) {
.grid-wrapper {width: 140px;} /* 2 columns */
}
#media (min-width: 290px) {
.grid-wrapper {width: 210px;} /* 3 columns */
}
...
I hope this will do the trick:
http://jsfiddle.net/CnjZR/1/
<div id="container">
<div id="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS:
#container {
width: 100%;
overflow: hidden;
background: red;
text-align: center;
}
.block {
width: 20px;
height: 20px;
background: blue;
float: left;
margin: 5px;
}
#wrap {
background: green;
overflow: hidden;
display: inline-block;
}
Not too sure if you where looking for something like 'flex-justify' , I added in the demo a turn around based on inline-boxes behavior and text-align values.
edit : point cleared: text-align:center ; is it.
http://jsfiddle.net/JhxSd/10/
The point is you should not use float, but display.
Float is not friendly with centering , nor vertical nor horizontal, since it is not standing in the natural flow of the document.
#container {
width: 75%;
border: 1px solid;
text-align:center;
overflow:hidden;
padding:1em 1em 0;
box-sizing:border-box;
float:left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
display:inline-block;
margin: 10px;
}
I think, everything you have almost done already.
#container {
width: 75%;
border: 1px solid;
float: left;
}
#container .block {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin: 10px;
overflow: hidden;
}
http://jsfiddle.net/JhxSd/3/
Try this:
#container {
width: 75%;
border: 1px solid;
float: left;
overflow: hidden;
text-align: center;
}
#container .block {
display: inline-block;
width: 50px;
height: 50px;
background-color: blue;
margin: 10px;
}
If you truly need everything left-aligned then I think you're out of luck with just CSS.
You can use the text-align:justify for the container and use the display:inline-block for the div.block. but you need add some placeholder tag at the last.Like this:
HTML
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
CSS
.wrapper {
width: 75%;
border: 1px solid;
font-size: 0.1px;
text-align: justify;
}
.wrapper:after {
content:"";
display:inline-block;
width: 100%;
}
.wrapper div{
font-size: 16px;
display:inline-block;
*display: inline;
zoom:1;
color: #fff;
background-color:blue;
width: 50px;
height: 50px;
margin: 10px;
}
.wrapper .placeholder {
width: 50px;
height: 0px;
background:none;
}
Please view the demo. A detailed tutorial, please click here.
I have a container layer with a width of 850px. Inside of that i have 4 layers displayed as inline-blocks floating left, each of which are 100px high and 200px wide.
How can i space them so the outside ones line up at the edges of the container div but are spaced evenly within?
css
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background-color: #09F;
}
html
<div id=content>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.
The following works, but I don't know how useful it is for you.
#content {
width: 848px;
margin-right: auto;
margin-left: auto;
background: #666;
overflow: hidden;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
#featured.first { margin-left: 0px;}
<div id=content>
<div id=featured class="first"></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.
<div id="content">
<div class="kludge">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
</div>
I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.
The CSS:
#content {
width: 850px;
margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
width: 900px; /* create room for the right hand margin of last item */
margin-right: -50px;
}
.featured {
display: block; /* inline-block not necessary for floated elements */
height: 100px;
width: 200px;
float: left;
margin: 0 10px;
background-color: #09F;
}
I think the easiest way is:
<style>
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
border:1px solid #000
}
#featured1 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 0px;
margin-top: 10px;
background-color: #09F;
}
#featured2 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
</style>
</head>
<body>
<div id=content>
<div id=featured1></div>
<div id=featured2></div>
<div id=featured2></div>
<div id=featured2></div>
</div>
Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):
CSS:
#content {
width: 848px;
margin: 0 auto;
overflow: auto;
}
.featured {
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
.featured:first-child {
margin-left: 0;
}
HTML:
<div id="content">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>