I have a problem with the floating. I'll try to explain my problem. What I have is 6 menu bars I want to float. 3 on the left and 3 on the right. However I want the ones on the right to come after the 3 on the left. As in they are no higher than the bottom of the last left one. Similar to the picture someone else had (Credit goes to the topic here
However instead I am getting all of the bars in the same rows like so.
I have provided ALL CSS proporties below. Can anyone figure out why I can't get it the way I wanted? (The bar-groups go inside the gameplay-info-content)
#gameplay-info-content {width: 688px;}
#bar-group-left {float: left; margin: 8px;}
#bar-group-right {float: right; margin: 8px;}
HTML:
<div class="leftcolums">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>
//If you want to achieve the first image add a div with class clear below
<div class="clear"></div>
<div class="rightcolums">
<div class="right">4</div>
<div class="right">5</div>
<div class="right">6</div>
</div>
<div class="clear"></div>
STYLES:
.leftcolums{float:left;}
.rightcolums{float:right;}
.clear{clear:both;}
Related
I am creating a web page and wanted to use a system similar to foundations/ bootstrap with defined columns and rows. I am happy with what I have so far, however I am not sure how I can center a column within a row, while still using a defined grid system.
I know usually the html is formatted like this:
<div class="column column-6 center">
http://codepen.io/Kiwimoose/pen/dpvEqO
Is what I have so far,
I am just not sure how the "center" tag is usually formatted in foundations. I would like to have the column in the second row centered, as well as others in the future.
Your code is OK, you just have to change the order in CSS:
.column {
position: relative;
float: left;
display: block;
}
.center {
margin:auto;
float:none;
}
Style .center class after . column class and it will work.
BTW, it is a good idea to clean up your code a little bit.
Try
<div align="center">
And then you can customize it in the css that you're doing
In Zurb foundation you can use "-offset-" and "end" class names,
for example
<div class="row">
<div class="large-6 large-offset-3 end columns">6 centered</div>
</div>
docs here
to center properly (with no headaches) with Twitter Bootstrap you can simply set empty divs as follows:
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
centered div in all resolutions
</div>
<div class="col-xs-3"></div>
</div>
Or you can use offset too
I've read a bunch of SO questions/answers on side-by-side (row) divs, but I don't think I'm grasping it as I can't find a solution for my specific setup:
http://www.trforums.com/h18-iwaku
Basically, I want the div on the very bottom to be to the right to the "Hey, What's up", "Navigation," and "Connect" boxes, instead of just under them. Is this possible to do?
The divs themselves are just classes with their corresponding html content. It's very basic but here's my code:
http://pastebin.com/AQrqqewA
My html is very rusty so other suggestions are more than welcome. Thanks for any help.
Try surrounding each column in a DIV:
<!-- Left column -->
<div id="leftColumn">
<div class="ex">
<center><img style="display: inline;" src="http://i.imgur.com/wCP3WP3" alt="" /></center>
<h1>Hey, what's up?</h1>
</div>
<div class="navbar">
<b>NAVIGATION:</b> Zukan | Movies | Retsuden | Photography |
</div>
<div class="connect">
<b>CONNECT:</b> Livejournal
</div>
</div>
<!-- Right column -->
<div id="rightColumn">
<div class="slideshow">
Bottom div that I want in a row with the top one...
</div>
</div>
CSS:
#leftColumn {
float: left;
width: 410px; // Width of this column
}
#rightColumn {
float: left;
width: 500px; // Width od this column
}
Move the div with a class slideshow next to the div with a class ex and apply floats, as you can see in JS Bin
The final result can be seen here
Use float:left or display:inline on the divs that you want next to each other.
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)
I dinamically create the following div structure:
<div id=Box>
<div id=outer>
<div id="inner1" class="split_right">
some
</div>
<div id="inner2" class="split_left">
some
</div>
.....
.....
<div id="inner(n)" class="split_right">
some
</div>
<div id="inner(n+1)" class="split_left">
some
</div>
</div>
</div>
The number of divs is dependent on the number of s passed in one array.
The problem is, that I want to give a css rule to split_right and split_left like this:
.split_left {
float: left;
margin: 0px 10px 5px 10px;
}
.split_right {
float: right;
margin: 0px 10px 5px 10px;
}
This works fine on chrome and safari but doesn't work in any IE6+
What am I doing wrong??
UPDATE
This is what I am trying to do:
http://postimage.org/image/g2t4qsq4v/
The outer div has a fixed width equal to 2*inner div width + 50pixels so that 2 s fit together in the same line.
Try it with this:
<div id=Box>
<div id=outer>
<div id=inner1 class="split_right">
some image
</div>
<div id=inner2 class="split_left">
some image
</div>
.....
.....
<div id=inner(n) class="split_right">
some image
</div>
<div id=inner(n+1) class="split_left">
some image
</div>
</div>
</div>
You have forgotten the quotes
Not sure exactly what is not working in IE and I don't know if you have a wrapper with a defined width that fits those just perfectly. But there is a famous bug in IE 6.. maybe 7 too I am not sure. If you have float left and margin in the same direction for example float left, and margin left xx number of pixels in IE 6 it will double the margin. So if you do have a define spaced that those boxes supposed to fit into, in IE it will most likely wrap to the next line making it look like it is not floating
add
display: inline;
to the css of each split class
I have a container div, inside which I want to pack a variable number of divs of unknown (variable) height but with a given min-width. My requirements are:
If the container is wide enough to accommodate two columns, I want them to distribute themselves nicely in two columns without unnecessary whitespace.
It not, they should just go above each other.
Currently, I've given the divs width:48% margin-right:2%;float:left; which works nicely in the one-column state but when I resize the browser window, making room for two columns, every div which ends up in the left column insists on aligning itself horizontally with the bottom of the last div which went to the right:
what I have http://img602.imageshack.us/img602/5719/whatihave.png
This is how I would like them to go (no wasted space):
what I want http://img96.imageshack.us/img96/6985/whatiwantu.png
I would like a pure CSS solution if possible.
Thank you! /Gustav
EDIT:
This markup illustrates my problem:
<html>
<head>
<style type="text/css">
.box {
width: 48%;
min-width:550px;
margin-right:2%;
margin-bottom: 1.5em;
background:blue;
color:white;
height:180px;
float:left;
}
.tall {
height: 250px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>
The .boxes are generated dynamically, and so are their heights, I just threw in one taller to illustrate.
I don't think you can achieve the desired effect with pure CSS. I've used jQuery Masonry to replicate the effect you're after and it worked really well.
I'd love to see a pure CSS solution for this but haven't seen anything come close yet.
I believe that if you have a div for each column into which you put the numbered divs you will get what you want. Something like this:
<div class="containerDiv">
<div class="column">
<div class="content">
1
</div>
<div class="content">
4
</div>
</div>
<div class="column">
<div class="content">
2
</div>
<div class="content">
3
</div>
</div>
</div>
The next step appears to be "how do I balance my columns". Some code somewhere is generating the boxes you mentioned. It is deciding on the height of each box. This code will need to generate a balanced list of boxes for each column prior to forwarding the request to the JSP for presentation. By balanced, I mean "the height of column1 is similar to the height to column2"