This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I am trying to render a section of my pafe as in this following image. http://i.imgur.com/63q9Syr.jpg
while I am getting it to work fine for smaller screens (using media queires) I am not able to get it for for screen size > 768px. It either makes the 2 boxes overlap or the space on the either sides of the boxes aren't even. Is there a way I can fix it?
<section class="carousel price-carousel">
<div class="container">
<div class="price-Container">
<div class="month-column">
<h4>Monthly</h4>
<p>$9.95</p>
<p class=”sub-text”>per computer</p>
</div>
<div class="year-column">
<h4>Yearly</h4>
<p>$99</p>
<p class=”sub-text”>Save 20% when you pay anually</p>
</div>
</div>
</div>
</section>
JSFiddle: http://jsfiddle.net/d4gyo5s8/
Instead of floats, I would use inline blocks as follows.
.container {
margin: 0 auto;
max-width:1050px;
}
.price-carousel{
background-color: #eee;
float:left;
height:auto;
margin-top: 10px;
padding-bottom: 10px;
width:100%;
}
.price-Container {
text-align: center; /* this will center the month and year columns */
}
.price-carousel .month-column{
background-color: #fff;
border: 1px solid;
display: inline-block; /* add this line instead of float */
height:120px;
margin-left: 0;
margin-top:35px;
text-align: center;
width:240px;
}
.price-carousel .year-column{
border: 1px solid;
background-color: #fff;
display: inline-block; /* add this line instead of float */
height:120px;
margin-left: 30px;
margin-right: -10%;
margin-top:35px;
text-align: center;
width:240px;
}
.price-carousel .year-column h4, .price-carousel .month-column h4{
background-color: #676767;
color: #fff;
height: 25px;
margin-top: 0px;
padding-top:5px;
width: 100%;
}
<section class="carousel price-carousel"> <!--Price section -->
<div class="container">
<div class="price-Container">
<div class="month-column">
<h4>Monthly</h4>
<p>$9.95</p>
<p class=”sub-text”>per computer</p>
</div>
<div class="year-column">
<h4>Yearly</h4>
<p>$99</p>
<p class=”sub-text”>Save 20% when you pay anually</p>
</div>
</div>
</div>
</section>
I'll just post an updated version of the JSFiddle
Basically I removed the float :left|right and I added the CSS display: inline-block so that your two announcements indeed act as inline-blocks. As you have text-align : center then the blocks will automatically center on the screen. Feel free to add some margin if you want to increase the space between them.
http://jsfiddle.net/um0nyna3/
HTML:
<div class="wrapper">
<div class="leftcol">
test
</div>
<div class="rightcol">
test
</div>
</div>
CSS:
.wrapper {
width: 500px;
margin: 0 auto;
}
.leftcol {
float: left;
width: 49%;
background-color: lightblue;
margin-right: .5%;
margin-left: .5%;
}
.rightcol {
float: left;
width: 49%;
background-color: lightgreen;
margin-right: .5%;
margin-left: .5%;
}
Heres a good base for you to start off with.
Basically to get it even for a responsive site you need to set all widths in percentages. Any padding/margin on left or right also need to be percentages. Test this out. I didn't add any media queries as this should give you a good base.
Related
I want to place 3 div's evenly inside another div. However, I can't get rid of the right margin for the last floating box. Also, the spaces between them do not look right to me.
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div>
<div style="clear:both;"></div>
</div>
</div>
.page{
background-color: green;
padding: 10px;
}
.box{
background-color: blue;
}
.b{
width: 30%;
margin-right: 3%;
background-color: #999;
float: left;
height: 100px;
}
The code is located at http://jsfiddle.net/u6KqK/
Is there a better solution for this?
You're using 99% (30+30+30+3+3+3) of the parent div, not 100%, thus why the right margin of the right-most div appears to be 4%. Here are a couple solutions:
1) set the margin-right to use the final percent:
.b{
width: 30%;
margin-right: 3.3333333333%;
margin-right: calc(10%/3);
background-color: #999;
float: left;
height: 100px;
}
Since older browsers don't support calc, I included a fallback that will be identical for essentially every scenario. Fiddle: http://jsfiddle.net/u6KqK/7/
2) Add a 1% margin to the left of the first div:
.b:first-of-type{
margin-left:1%
}
Fiddle: http://jsfiddle.net/u6KqK/1/
You can add a second class to the middle div and add the margins to that class. That way it only gets applied to the middle class.
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b middle">b2</div>
<div class="b">b3</div>
<div style="clear:both;"></div>
</div>
</div>
.page{
background-color: green;
padding: 10px;
}
.box{
background-color: blue;
}
.b{
width: 30%;
background-color: #999;
float: left;
height: 100px;
}
.middle{
margin-right: 5%;
margin-left: 5%;
}
http://jsfiddle.net/u6KqK/9/
Since you have the left-most div on the actual left it would make sense to have the right-most also to the far right with zero margin
JSfiddle Demo
HTML
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div> /* cleafix div removed */
</div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page{
background-color: green;
padding: 10px;
overflow:hidden; /* quick clearfix */
}
.box{
background-color: blue;
}
.b{
width: 30%;
margin-left: 5%; /* (100% - 3x30%)/2 */
background-color: #999;
float: left;
height: 100px;
}
.box div:first-child {
margin-left: 0;
}
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'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
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)
Basically I'm laying out a website and I'm using DIV's to have a header, left-column, right-column and footer. I want to have the content section of the website expandable to the html/text inserted into it so i have been using height: auto.
I'm using background images for the top of the header, bottom of the footer and a 1px high filler for the body of the website.
My problem is everything I have tried essentially eliminates the middle background image if I try to have the right-col to the right of the left-col and not under it.
I'm sure this is probably something pretty easy but I have been on it since last night and I'm about up done trying to figure it out.
it's valid XHTML and CSS (except for jQuery UI stuff that is CSS3, though that shouldn't matter structurally).
Any ideas or could someone point me to a tutorial on how to get a two column layout using background images?
<body>
<div id="top">
THE TOP IMAGE GOES HERE IN CSS
</div>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
<div id="left-col">
</div>
<div id="right-col">
</div>
</div>
</div>
<div id="bottom">
THE BOTTOM IMAGE GOES HERE IN CSS
</div>
<div id="footer">
</div>
</body>
#wrapper {
margin: 0 auto;
width: 838px;
background-image:url('../images/wrapper_bg.gif');
background-repeat:repeat-y;
}
#header {
width: 818px;
color: #333;
padding: 10px;
height: 100px;
}
#navigation {
width: 838px;
}
#content {
width: 838px;
color: #333;
margin: 0px 0px 0px 0px;
/*min-height: 800px;*/
height: auto;
}
#footer {
width: 838px;
color: #333;
text-align: center;
}
#top{
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_top.gif');
}
#bottom{
clear: both;
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_bottom.gif');
}
#left-col{
margin-left: 20px;
width: 590px;
float:left;
height: auto;
}
#right-col{
width: 170px;
display: inline;
height: auto;
margin-right: 25px;
color: #777777;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
http://www.wholehealthconnect.org/home.php is the website.
Can anyone help me get the middle div to expand to content as well as have the right col next to the left col and still have the background image behind them?
I am not sure I understood your problem correctly, so do not hesitate to point me in the right direction.
Basically you want the links: FAQ, Professional ... Facebook to show up on the right ?
Why not use a classic:
#right-col {
float: left;
margin-left: 610px; /* or perhaps higher */
}
Am I right on track or did I not understood the problem you were stating ?
Add overflow:hidden to #content. Should do it.