I'm looking to create a website (or at the very least a homepage) like Joules.com
I essentially want to create boxes side by side in varying sizes but want them to resize or move to a new line with the browser window resizing (responsive?). It's also necessary for them to be centered. I can get to the point where I have the divs side by side but they don't seem to be centered... Here's what I have so far. Any help would be greatly appreciated. I'm kind of nooby in this department but wanting to learn!
CSS
#container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#Womens {
height: auto
width: 241px;
float: left;
margin: 0 auto;
text-align:center;
}
#Mens {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
#Footwear {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
#Accessories {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
HTML
<body><center>
<div id="container">
<div id="Womens">Womens</div>
<div id="Mens">Mens</div>
<div id="Footwear">Footwear</div>
<div id="Accessories">Accessories</div>
</div>
First at all you don't need to use an ID for each element, since your CSS code is the same for everyone use a classname instead:
<div id="container">
<div class="column">Womens</div>
<div class="column">Mens</div>
<div class="column">Footwear</div>
<div class="column">Accessories</div>
</div>
Then don't use float because you can't center those elements, use inline-block:
#container {
font-size:0;
text-align:Center;
}
.column {
font-size:14px;
display:inline-block;
}
Check this Demo Fiddle
Your CSS could be much simpler by using a class (Don't Repeat Yourself ;) ).
If you put text-align: center; on the container instead the container itself and its child contents will be centered. If you want you could then override the setting for the separate columns, or just for their content.
You've also used fixed pixel values for the column width, so they can't really be "responsive." You can use percentage values there as well, but that can have some screwy side effects. Note that 4 columns even with auto margins still need to be < 100% or else they wrap oddly. They also might collapse or overlap at smaller sizes. You can set a min-width on the container or the columns to help prevent this, along with a margin-bottom to keep them separate if they do wrap.
Also, if you just use percentage width and inline-block, the columns will be aligned at the bottom. Using vertical-align: top; fixes that. You said initially you wanted different heights, but if you didn't you could set a min- or max-height & put something like overflow:scroll on the content.
#container {
width: 100%;
min-width: 320px;
margin: 0 auto;
overflow: hidden;
text-align:center;
}
.box {
margin: 0 auto;
margin-bottom: 10px;
width: 20%;
min-width: 90px;
padding: 1%;
vertical-align: top;
display: inline-block;
background-color: #678;
color: #fff;
}
.content {
background-color: #fff;
color: #333;
padding: 1em;
text-align: left;
}
<body>
<div id="container">
<div id="Womens" class="box">Womens
<div class="content">This is some left-aligned women's content about/for women. View the Code Snippet in fullscreen!</div>
</div>
<div id="Mens" class="box">Mens
<div class="content">This is some left-aligned men's content about/for men. If you resize the browser the columns will be responsive, but break after a certain point.</div>
</div>
<div id="Footwear" class="box">Footwear
<div class="content">This is some left-aligned footwear content about/for feet. Feet are weird.</div>
</div>
<div id="Accessories" class="box">Accessories
<div class="content">This is some left-aligned accessory content about stuff you men or women could potentially put on their feet, or whatever.</div>
</div>
</div>
</body>
Related
I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:
As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.
If I allow the div to set its own height, I get this:
So my images are no longer lined up.
HTML
<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>
<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>
<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>
</div>
CSS
.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}
.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}
.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}
Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.
$maxDesc;
function equalize(){
$('.owl_diary_desc').each(function(i){
if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
});
$('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}
When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.
Thank you for reading this
I'm having an odd problem with layouts. I've used Meyer's CSS reset. I have a div containing 3 divs as follows. I've not added any content yet.
<div id="container">
<div class="gallery"></div>
<div class="gallery"></div>
<div class="gallery"></div>
</div>
The following styles are applied
#container{
width: 954px;
}
.gallery {
display: inline-block;
width: 270px;
margin: 24px;
}
So in my mind each gallery is 24px + 270px + 24px = 318px wide. The combined width of the 3 gallery divs is therefore 318px * 3 = 954px.
However the divs will only display across a single row when I increase the width of #container to 960px.
Where are the 6 mystery pixels coming from? I've double checked all other border, margin and padding values are 0. I've even set outline to 0px although this shouldn't have an effect either way.
The inner divs are set to display: inline-block;. This means that any white-space between them will result in a single space added between them in the layout.
Option 1
While not a pleasant solution, you will not see the extra space if you do this.
<div id="container">
<div class="gallery"></div><!--
--><div class="gallery"></div><!--
--><div class="gallery"></div>
</div>
Option 2
Another solution that is unpleasant for different reasons, is to set font-size: 0; on the #container. If you intend to have text inside, you will need to set the font-size of the elements inside to a pixel value.
#container{
width: 954px;
font-size: 0;
}
.gallery {
display: inline-block;
width: 270px;
margin: 24px;
}
Option 3
The cleanest solution however would probably be to float the inner divs left, and clear-fix the wrapper.
#container{
width: 954px;
}
#container:after {
content: "";
display: table;
clear: both;
}
.gallery {
display: inline-block;
width: 270px;
margin: 24px;
float: left;
}
Have you tried to "nowrap" the white-space?
I can't make it any clearer than this, sorry. I want to properly align 4 divs (on a width of 1150px as that is max-width of the content div) and upon resizing when it can't do 4, 3 in the center etc etc)
On >1150px screens it would/should like this: http://i.imgur.com/KaOPqZK.png. Now, the closest I can come is this: http://i.imgur.com/6khwQkR.png. I can set the first-child margin to 0 on the left one, but as there are multiple rows, those would still have the padding. Creating new rows as divs isn't possible either, because that would ruin everything when it's resized and only shows 3/1 on both rows.
When resizing it should center, with even margins on all sides, and not like this as it is right now: http://i.imgur.com/GiR1nZ2.png.
Basically all the code I have right now is this, simply because I know of no other way.
div.project-container {
float: left;
margin: 0 8px 30px 8px;
position: relative;
width: 270px;
}
I'm guessing it has to be Javascript who rescues the day, and I'm fine with that. Pointers in the right direction, examples on the internets, all is welcome. Thank you.
Adapted from an old answer :
HTML
<div id="container">
<div class="obj">1</div>
<div class="obj">2</div>
<div class="obj">3</div>
<div class="obj">4</div>
<div class="obj">5</div>
<div class="obj">6</div>
<div class="obj">7</div>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
</div>
CSS
#container
{
max-width: 980px;
background-color: lavender;
display: inline-block;
text-align: justify;
}
.obj
{
width: 180px;
height: 180px;
background-color: lightgreen;
display: inline-block;
margin-bottom: 20px;
}
.obj.push {
height: 0px
}
.pushend {
width: 100%;
height: 0px;
display: inline-block;
}
demo
I'm having a hard time with what I thought would be a dead simple issue.
I'm trying to create a div that spans 100% of the width of a browser window. The div is filled with several child divs that expand to fill that entire space with alternating colors like a football field. These divs would expand to fit the full width of a given space that has individual 1% stripes that fill that space fully.
This seems to work fine in Firefox, but in Safari (and Chrome) the calculation seems to be too strict, and leaves some extra leftover space on the right-most div.
Is there any way to avoid this leftover space? I've encountered the same issue in Safari and Chrome even when placing it in a fixed width div... there is always space left over on the right. I wonder if I'm just asking it to do too much math?
Here is the code I am using, with alternate versions dividing the space into divisions of 5% and divisions of 1%. Sorry, it's long and redundant code.
<html>
<head>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.clearfix {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#field {
width: 100%;
background: #009900;
height: 100px;
margin: 0;
margin-bottom: 25px;
padding: 0;
}
.singleyard {
width: 1%;
float: left;
margin: 0;
padding: 0;
background: #009900;
}
.fiveyards {
width: 5%;
float: left;
margin: 0;
padding: 0;
}
.alt {
background: rgba(0,0,0,0.25);
}
.oneyard {
width: 20%;
float: left;
margin: 0;
padding: 0;
}
-->
</style>
</head>
<body>
<div id="field">
<div class="fiveyards">5</div>
<div class="fiveyards alt">10</div>
<div class="fiveyards">15</div>
<div class="fiveyards alt">20</div>
<div class="fiveyards">25</div>
<div class="fiveyards alt">30</div>
<div class="fiveyards">35</div>
<div class="fiveyards alt">40</div>
<div class="fiveyards">45</div>
<div class="fiveyards alt">50</div>
<div class="fiveyards">55</div>
<div class="fiveyards alt">60</div>
<div class="fiveyards">65</div>
<div class="fiveyards alt">70</div>
<div class="fiveyards">75</div>
<div class="fiveyards alt">80</div>
<div class="fiveyards">85</div>
<div class="fiveyards alt">90</div>
<div class="fiveyards">95</div>
<div class="fiveyards alt">100</div>
</div>
<div id="field">
<!--below section is repeated 10 times -->
<div class="singleyard">1</div>
<div class="singleyard">2</div>
<div class="singleyard">3</div>
<div class="singleyard">4</div>
<div class="singleyard">5</div>
<div class="singleyard">6</div>
<div class="singleyard">7</div>
<div class="singleyard">8</div>
<div class="singleyard">9</div>
<div class="singleyard alt">10</div>
<!--end repeated section-->
</div>
</body>
</html>
I had the same problem, this is what I discovered: somewhere in your CSS you have another div that has a width of 100% and ALSO has padding. Since the padding value is added to the width, the value of that div becomes greater than 100%. The solution is to make sure not to use padding on any div that is set to 100% width. If you need padding, try adding the padding to the element inside the div instead.
Only thing I can think of is to add:
html, body
{
width: 100%;
}
Just to make sure safari knows the parent container of field is also 100%;
Another thing to try is to add:
html { overflow-y: scroll; }
That should force a side scrollbar, even if it's grayed out. I wonder if some webkit rendering temporarily flashes a scrollbar, but fails to give the space back. Any of that work?
I have fixed mine by
body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
I fixed by using display: table-cell
#field {
width: 100%;
background: #009900;
height: 100px;
margin: 0;
margin-bottom: 25px;
padding: 0;
display: table;
}
.singleyard {
width: 1%;
margin: 0;
padding: 0;
background: #090;
display: table-cell;
}
.fiveyards {
width: 5%;
margin: 0;
padding: 0;
display: table-cell;
}
From my experience on a similar issue. When your code will not stretch the entire way on the mobile device (but will on the desktop), fixing it is a matter of finding some element that is pushing the boundary invisibly. There should be some item that is breaking out of its boundary - for me it was a logo image that was sticking about 20px outside the header div. You can find this by giving everything a border or by eliminating one thing at a time. Once you have found it, you can move it or remove it in order to allow things to stretch the full way again.
I have fixed mine by adding
html, body
{
width: 100%;
margin: 0px;
}
happy coding!!!
Noticed this wasn't answered. I was having the same issue. I added the following lines to my CSS class:
margin-right:-10px;
margin-left:-10px;
adding min-width: 100% seems to do the trick
I have a container div and would like to place three div tags within the center div, I have the XHTML correct, but what I am having trouble in is, well, centering the three divs within the div.
I will now show the code.
XHTML 1.0 Transitional (HTML)
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="contentbox">
</div>
<div id="contentbox">
</div>
<div id="contentbox">
</div>
</div>
</div>
Cascading Style Sheet (CSS)
#container {
width: 900px;
height: inherit;
margin: 30px auto;
}
#content {
float: center;
width: inherit;
height: inherit;
margin-left: auto;
margin-right: auto;
position: absolute;
}
#header {
margin: 0 auto;
background-image: url(images/logo.png);
background-position: center;
width: 250px;
height: 250px;
}
#contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
background-image: url(images/contentbox.png);
}
To see an example of what I am trying to do, please visit http://www.noxinnovations.com/portfolio/hfc/
I want to know how to center those three content boxes within the content div.
Thank you very much,
Aaron Brewer
Check if this is what you want :
http://jsfiddle.net/65WHf/1/
Note that ID's are supposed to be unique, and there's no such thing as center floating. To center a div, you must ensure it's positioned relativelly to it's container (wich is the default behaviour of most browsers of my knowledge) and make use of the followinf syntax :
.something {
margin: 0 auto;
clear: both; // instead of float
}
Hey,
float: center; won't work. There's no such value for the float property.
use this instead for the #content css
text-align: center;
hope that helps.
You could always do something like this:
HTML:
<div id="container">
<div id="header"></div>
<div id="content">
<div class="contentbox"></div>
<div class="contentbox"></div>
<div class="contentbox"></div>
</div>
</div>
CSS:
.contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
border: 1px dashed #999; /* just for visuals */
margin: 0 10px; /* just for visuals */
}
You definitely want to stay away from IDs as a general practice, do you can use them with javascript (jquery, etc) libraries. Plus it's cleaner that way.