I have a problem with floating divs. Here is my website: http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6
I don't know why on some rows there are 4 images and on others only one.
Here is code responsible for it:
#gallery-images {margin:0 0 50px 0; display: table}
div.image-item {
float:left; display: table; text-align: center; position: relative;
width:180px; height: 150px;
margin:10px 0 30px 40px;
vertical-align: middle; text-align: center;
}
div.image-item a {display: table-cell; vertical-align: middle;}
div.image-item img {margin:auto; border:1px solid #d3d4d4;}
#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;}
div.photo-item {margin: 0 auto; width:850px; display: block; text-align: center;}
div.photo-item a.img {margin:0 auto; text-align: center; }
Try display:inline-block;.
div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }
Change the display on div.image-item to inline-block and I would modify to have the image center within that div.
When you left float elements like that, as soon as they no longer fit on one line, the next floating element will drop down only as far as is necessary until it does fit.
The 5th image, for example, "gets stuck" against the bottom of your 3rd image instead of moving all the way back to the left edge because the 4th image isn't as high.
For the 10th image this doesn't happen, because the 9th image is higher than all the other images left of it, so as soon as the 10th image has dropped below the edge of the 9th image, it clears the entire row.
You'll see what I mean more clearly if you replace the margin by padding and add a border to .image-item.
To force the first item of each row down to the start of the next line, you should either not use floats, wrap every row of 4 items in a containing div, or use the magical powers of CSS3 to clear the floats at the start of each row:
.image-item:nth-child(4n+1) { clear:left }
Related
I have a footer made up of a few lists. I put each list in a div, and floating them so that the lists are horizontally next to each other. The text in each list is center aligned.
Now I'd like to center align all those divs! How can I do this? They are wrapped in a footer tag, but since the divs are floating, text-align:center; won't work.
Any ideas?
Thanks!
My CSS looks like this right now:
.footer{
height:180px;}
footer li{
list-style-type:none;
padding:0.2em 1em 0.2em 1em;
text-align:center;}
.section{
float:left;
margin-bottom:2.5em;
padding-top:0.8em;
margin-left:2em;}
To center an element, it'll typically need margin: 0 auto as stated in another answer.
If you want more elements within your container to center within the container, you should not be floating them. Floating them takes them out of the layout flow. You'll just want to make them display: inline-block.
* {
padding: 10px;
text-align: center;
}
footer {
background: #ddd;
}
.item {
display: inline-block;
background: #999;
width: 20%;
}
Example:
http://codepen.io/anon/pen/RKQJNa
.footer {
margin: 0 auto;
}
This should align the footer in the centre
I need to design a menu, in which the menu is always centered, with variable number of items, browser resolutions, and the items would be aligned to the left (menu centered in the page, but items aligned to the left).
(As you can see it is not centered at all).
This is my code:
<html>
<head>
<style type="text/css">
.extPanel{
background-color:#555;
padding: 0px 20% 0px 20%;
display: table;
}
.split{
clear: both;
}
.menuElement{
float:left;
background-color:#aaa;
margin: 0px 20px 20px 0px;
width: 200px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="extPanel">
<div class="menuElement">item1</div>
<div class="menuElement">item2</div>
<div class="menuElement">item3</div>
<div class="menuElement">item4</div>
<div class="split"></div>
External Panel. 20% left and right padding.
</div>
</body>
</html>
As you can see, the external div has 20% padding in order to center the items. Items float to the left. Items are not centered at all because a remaining space exists in which item4 doesn't have enough space, so it floats to the next line.
And if the menu would have only one menu item, this item float to left so is more obvious that the menu is not centered. If I try to use some style to center all the items (text-align or something like this), item4 would appear centered below item2, and I need that the items are align to left.
I need:
Menu to be centered in the page, with any number of items
Items centered
Cross-browser compatibility (to IE8 at least, and mobile explorers)
No JavaScript
Try using display: inline-block;.
You can add the following code:
.extPanel {
text-align: center;
}
.menuElement {
display: inline-block;
*display: inline; //ie
zoom: 1; //ie
//remove float: left;
}
instead padding, you could simply use margin and inline-block for childs.
http://codepen.io/anon/pen/quByg
.extPanel {
margin:0 20%;
text-align:justify;
}
.menuElement {
display:inline-block;
width:200px;
height:200px;
margin:0 20px 20px 0;
border:solid;
}
You want to set text-align: center; on the surrounding body. Then .extPanel needs a margin: 0 auto;
http://jsfiddle.net/markdelorey/ttZgZ/
I found the solution by combining all your answers.
You can found it here:
http://codepen.io/anon/pen/odhrp
I used diffent IE hack here:
http://codepen.io/anon/pen/flEsm
As you can see, works with one element, two, three... When items menu don't fit in extPanel max width, items goes to next line, align to left, and menu is still centered.
.extPanel {
background-color:#555;
text-align:center;
display: table;
margin: auto;
max-width: 80%;
text-align: justify;
}
.menuElement {
display:inline-block;
width:200px;
height:200px;
margin:20px 20px 0;
border:solid;
text-align: center;
}
And text-justify: distribute solve the problem with text-align: justify in IE.
I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?
JS Fiddle: http://jsfiddle.net/F6R9C/
HTML
<div>
<span>
Visit website
View project
</span>
</div>
CSS
div { background:red;overflow:hidden }
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}
Another option would be to give the span display: table; and center it via margin: 0 auto;
span {
display: table;
margin: 0 auto;
}
One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):
div {
background: red;
overflow: hidden;
text-align: center;
}
span a {
background: #222;
color: #fff;
display: inline-block;
/* float:left; remove */
margin: 10px 10px 0 0;
padding: 5px 10px
}
http://jsfiddle.net/Adrift/cePe3/
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
Applying inline-block to the element that is to be centered and applying text-align:center to the parent block did the trick for me.
Works even on <span> tags.
Spans can get a bit tricky to deal with. if you set the width of teach span you can use
margin: 0 auto;
to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.
Here is the jsfiddle I cam e up with off the top of my head: jsFiddle
EDIT:
Adrift's answer is the easiest solution :)
only css div you can center content
div{
display:table;
margin:0 auto;
}
http://jsfiddle.net/4q2r69te/1/
I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:
div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}
I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.
I have a wrapper wrapping number of large 300 by 300 divs. when the browser is in full screen the wrapper sits in the center. But when I resize the browser the content flows to second the line, but the wrapper takes 100% of the window. For example the browser window width is 800px the content is 4 blocks 300px by 300px so two blocks together takes only 600px and the other two are in the second line. My problem is that wrapper stretches to 800px and the content sits to the left of the screen and i want it in the center (when I use float: left)
When I try the same using display: inline-block and text-align: centre, I can have the content centred in the screen even though the wrapper stretches to 100% of the width. Problem no1. with this solution is that is that if only one block is in the last row than it is centred right in the middle the second problem is mobile browser counts font-size: 0 somehow differently so it is a little misaligned.
simplified fiddle you can see that if the window is small the third orange box falls to second line but is centred. When I use text-align: left than all boxes are against left side leaving significant space on right.
here is the relevant CSS I have on site:
#site-wrapper {
min-height:100%;
text-align: center;
position:relative;
}
#container {
position:relative;
width: auto;
margin: 0 auto;
display: inline-block;
padding-bottom:40px; /* Height of the footer */
}
div#content-wrapper{
padding:5px 0 5px 0;
font-size: 0;
text-align: center;
margin-left: auto;
}
#column1, #column2, #column3 {
margin-right: 5px;
}
#column-last{
margin-right: 5px;
}
div.column {
//float: left;
display: inline-block;
vertical-align: top;
font-size: 0;
}
.item {
background: #0072C6;
width: 20em;
padding: 5px;
height: auto;
margin: 0 0 5px 0;
font-size: 14px;
color: #FFF;
box-shadow: inset 0 0 100px #1082D6;
}
I am very new to html/xml/css and I'm trying my best to teach myself. However, I have run into a problem that a Google search could not solve.
I would like to position a small image in a fixed location relative to another element(?)
I believe this is the code of the element i want to position the second element relative to.
<style type="text/css">
#wrap {
width:550px;
background-color:#fff;
margin:0 auto;
padding:0;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
#container {
width: 500px;
margin:0 auto;
padding: 25px;
font-size:.85em;
background-color: #fff;
}
and this is partial code I'm trying to edit to position .xyz to the right of "#wrap"
.xyz {
position: ???;
top: 200px;
right: ???;
_position: ???;
_margin: ???;
_text-align: right;
z-index: 1337;
}
my search of SOF has lead me to believe i'm supposed to do something along the lines of this -
Position an HTML element relative to its container using CSS
- but i haven't been able to.
I greatly appreciate any help you may offer. Hopefully I've explained my problem properly.
If you want .xyz inside of #wrap but on the right side, doing a float:right; on your .xyz element will achieve what you want.
EDIT:
try something like this:
<div class="wrap">
<div class="shuffle"><my shuffle img></div>
......Other stuff......
</div>
then css wise:
.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}
Updated for modern CSS:
If you're working in one dimension, as with a phone view (where everything is basically vertical) or a navigation bar (where everything is basically horizontal), use the Flexible Box module.
Set your container to display: flex; and flex-flow: row; or column; depending on which way you're headed.
Justify-content:space-around; will space the child items evenly with roughly the same amount of space around the first and last item as there is between each two. If you want the first and last items flush against the container, use justify-content:space-between; instead.
Align-items: flex-start; will give you a left-hand margin if you're flowing down a column. If you're flowing across a row, you'll get your items lined up on a top margin. Align-items: center; will center your column or your row. Align-items: flex-end; will line up a column on the right, which is what you want if you're writing in an RTL language like Hebrew or Arabic, or sit all your row items on a bottom line.
If you're making a horizontal menu of text items, you might want to try align-items:baseline; and get all that type lined up on the actual baseline of the typeface you're using.
What if you're working in two dimensions?
Then use CSS-Grid!
Rachel Andrew, the editor of Smashing Magazine, and Jen Simmons, now at Apple and formerly a developer advocate at Mozilla, have together and separately published a ton of resources (and then I gave several WordCamp talks on what I learned from them.)
I can't tell you how happy I have been to ditch floats, in this old answer from nearly eight years ago, to the dustbin of history, except when I need to wrap type around a shape. But that's a topic for another day ...
--------------Answer from 2013---------
My preferred method, most of the time, is to put all the elements I want next to each other into a container and then float everything left. So I'm going to add a container class (I'm not a big fan of IDs - they're very limiting) to your styles and make a few edits:
.container {
float: left;
width: 800px;
}
#wrap {
float: left;
width:550px;
background-color:#fff;
margin:0 auto;
padding:0;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
#container {
width: 500px;
margin:0 auto;
padding: 25px;
font-size:.85em;
background-color: #fff;
}
.xyz {
float: left;
margin: 0 0 0 20px;
width: 200px;
}
This code will give you the .wrap div on the left and the .xyz class on the right, with a 20px margin between them, inside the .container class.
Not sure what you want to do with your #container ID, based on your assertion that you wanted to position .xyz next to .wrap.
If you'd really like to position #container in the same row with the other elements, float it left, too:
.container {
float: left;
overflow: auto;
width: 1330px;
}
#container {
float: left;
width: 500px;
margin:0 0 0 20px;
padding: 25px;
font-size:.85em;
background-color: #fff;
}
.xyz {
float: left;
margin: 0 0 0 20px;
width: 200px;
}
The container ID and the xyz class now each have a left margin of 20px, and the big container, the class, is wider than the sum of all the divs.
This is a method that's worked over and over for me building static sites and WordPress child themes (mostly based on the Genesis framework) since I started writing proper markup in 2007.