My divs are displaying a staircase effect, as shown below. Usually in tables you can use vertical-align: top, not sure how to do this for divs.
____1_____
_____2_____
______3_____
The CSS I have so far is:
.areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto;
width:130px;
padding:5px;
}
The HTML is:
<div>
<div class="areadiv">
content
</div>
</div>
I'm with #bartolsthoorn that your CSS is quite confusing. But rather than using float I'd use only display: inline-block. And when you use inline-block you have to remember to set vertical-align as well as most (all?) browsers default to middle:
.areadiv {
display: inline-block;
vertical-align: top;
width: 130px;
padding: 5px;
}
That's all you need.
Ok firstly the width of the containing div must be set = or > than the combined widths of the floats, that's how it knows to move on to the next line.
For example..
.areadiv
{
display: inline-block;
vertical-align: top;
width: 130px;
padding: 5px;
}
.containerdiv
{
width: 421px; /* ( 130 + 10 ) x 3 + 1 just in case */
}
And the HTML:
<div class="containerdiv">
<div class="areadiv">
</div>
<div class="areadiv">
</div>
<div class="areadiv">
</div>
</div>
Your CSS doesn't make so much sense with the layout you're are trying to achieve, it should be:
.areadiv {
float: left;
display: block;
width: 130px;
padding: 5px;
}
The margin: 0 auto; is used for centering container divs and you don't need the inline-block.
Related
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>
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 using different DIV tags to act as tables and I want to get another DIV at the bottom of the content DIV.
<div class="table">
<div class="table-row">
<div class="table-information">
Content
</div>
<div class="table-content">
More content
<div class="extra">
Here's the extra content
</div>
</div>
</div>
</div>
Here's the CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-information {
background-color: #eaeaea;
height: 150px;
padding: 10px 15px;
width: 150px;
}
.table-content {
display: table-cell;
height: 150px;
padding: 10px 15px;
}
.extra {
vertical-align: bottom
}
As you can see I have vertical-align: bottom; for the extra class. I want to have the content within that DIV at the bottom and not right below the text More content. But nothing happens when I'm trying this solution.
http://jsfiddle.net/edgren/3jjbV/
How can I solve this problem?
Thanks in advance.
Here is 1 way to achieve that
.table-content {
display: table-cell;
height: 150px;
padding: 10px 15px;
position:relative;
width:150px;
}
.extra {
vertical-align: bottom;
bottom:0;
position:absolute;
}
I do it by adding relative position to the container table-content and then absolute positioning bottom to the extra.
here is a fiddle
Another way is like this:
.extra {
vertical-align: bottom;
display:table-cell;
height: 150px;
width:150px;
}
Here is a fiddle for the 2nd option.
From these 2 options personally i would go with the 1st one,
but you should be careful with the fixed widths and heights (because of the absolute positioning).
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result:
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.