I have to show a list of divs in a seamless order, thought their heights may vary.
Here's an example:
As you can see, when an element is floated to the left and is positioned next to another float it generates a white space until the next float. This doesn't happen the other way around. I can't seem to find a way around this and as I use javascript to filter out certain elements (divs) I can not create two different columns.
Here's the html/css:
<div style="width: 200px;">
<div style="float: left; width: 50%; background-color: green;">
<p>Float1</p>
</div>
<div style="float: left; width: 50%; background-color: blue;">
<p>Float2</p>
<p>expanded</p>
</div>
<div style="float: left; width: 50%; background-color: yellow;">
<p>Float3</p>
<p>expanded</p>
</div>
<div style="float: left; width: 50%; background-color: gray;">
<p>Float4</p>
</div>
<div style="float: left; width: 50%; background-color: red;">
<p>Float5</p>
</div>
</div>
Any ideas how to get it to look so that Float1 and Float3 don't have empty room between them?
In your example it might be possible using float:left for the uneven blocks and float:right for the even ones but in general this is not possible using just css. You will need javascript or 2 separate columns (or a combination...).
As you are using javascript already, it would be pretty easy to load all visible blocks in an array and divide them over two columns.
It seems that toggling float:left; and float:right; does what you want: http://jsfiddle.net/cELff/1/
Try using display: inline-block instead of float: left.
appreciate this q is old, for others that find this in a search ( like I was searching ).
the reason for the space is the heights. try setting a height on the floated items.
Related
I'm new to CSS and have a somewhat general question, but with a specific purpose.
Here is the webpage in question: http://www.lymemd.org/indexmm6.php
I have several DIVs: #BannerArea, #BannerinLeft, and #BannerinRight, all which format everything in the green square. I'm looking to split everything up and so something like this:
If anyone could help point me in the right direction in terms of what tags I'll need to do and what I'll need to get rid of, I would be very grateful. I have tried many times to get everything right, but I always end up making something worse.
Thanks very much.
The simplest way would be to make two columns, the left one including the Twitter and What's New div, and the right one including the Support Us and Diane Rehm divs. These two columns will have to float, so make sure they are in a container of the correct width. The top div is easy.
Here's a jsfiddle: http://jsfiddle.net/83ngD/7/
The basic HTML:
<div id="wrapper">
<div id="topgreen"></div>
<div id="leftcolumn">
<div id="twitter"></div>
<div id="whatsnew"></div>
</div>
<div id="rightcolumn">
<div id="supportus"></div>
<div id="dianerehm"></div>
</div>
</div>
The basic CSS:
#wrapper {
width: 960px; /*/ example width /*/
margin: 0 auto; /*/ centers the div /*/
}
#topgreen {
width: 100%;
height: 50px; /*/ example height /*/
}
#leftcolumn {
width: 50%;
float: left;
}
#rightcolumn {
width: 50%;
float: left;
}
Now just fill the other divs with the content you want. The code above will give you the layout from your picture, but very basic.
I have 2 divs which I need to arrange horizontally, I know the width of the second one and I need the first one to take all the remaining free space. can anyone help me and tell me the css in order to achieve that?
You could do something like this:
<div style="width:500px;">
<div style="width:100px;float:right;background-color:cyan;">bar</div>
<div style="margin-right:100px;background-color:magenta">foo</div>
</div>
bar floats in the right 100px, on top of foo's margin. foo takes the other 400px.
Try to do something like that:
<div style="width:200px; float:left;"></div>
<div style="width:auto;"></div>
Try to set the width of the second container to your known value and the first one's to width:100%;
You can use percentages, which is handy when you don't care about exact width. If you need an exact width, use javascript to get the offsetwidth of the div you KNOW, and floating both divs. Then, set the width of the other div accordingly. What I would caution against is setting the other div's value in pixels- if the user resizes the window you have to account for it which is more work. If you don't need it to be perfectly exact, set the other div as a percentage, which will automatically handle window resizing.
Other issues crop up around it but basically thats one way of achieving it.
What you're asking for is a little tricky. But this should work...
http://jsfiddle.net/2hseV/2/
What this does is use div positioning. This should be cross-browser compatible. The reason I'm doing things this way is that there is no easy way to say "have two sibling divs, one of which consumes all available space" without pushing the second div off to the right.
For example, if you try using a percentage you'll either push the div to the right or come up short:
<div style="width: 200px; height: 100px;">
<div style="width: 100%; height: 100%; float: left;"></div>
<div style="width: 90px; height: 100%; float: left;"></div>
<div style="clear: both;"></div>
</div>
So instead, I'm suggesting that you overlap the second div onto the first one using absolute positiong, like this:
<div style="width: 200px; height: 100px; position: relative;">
<div style="width: 100%; height: 100%; float: left; position: relative;"><!-- Content of first div here --></div>
<div style="width: 90px; height: 100%; float: left; position: absolute; right: 0; top: 0;"><!-- Content of second div here --></div>
</div>
The one thing you have to keep in mind here is that the content of your first div will go under the second div if it becomes too wide - so you may need to restrict the width!
I'm trying to display on one line:
a H1 element aligned to the left of the containing box
several "buttons" (A elements here) aligned to the right of the containing box
all being on the same baseline
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
<div id="block1">
<h1>What a great title</h1>
This link can kill you
Click if you dare
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
http://jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
Code:
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
However, what you want can simply be accomplished using absolute positioning:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
This link can kill you
Click if you dare
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
This link can kill you
Click if you dare
</div>
</div>
To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
It's hard to achieve without any wrapping elements or fixed values...
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
Align your Links with 'display:block; float:right' to the right.
Now Set "line-height: 40px;" to both the heading and the links
Should work, but only when the size of the heading doesn't change....
One potential approach to this, depending on your exact needs, is to use a table layout:
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
JSFiddle: http://jsfiddle.net/bUsvX/40/
I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;
example (with use of Twitter Bootstrap):
<h2 style="display:inline">Users</h2>
<i class="icon-download-alt"></i>XLS
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
I'm trying to position some icons inside a table cell <td>, but the result is that they are position top right of the screen (outside of the table cell).
Short version of my code is like this:
<td class="td_name">
<div class="actions">
<div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
<div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
<div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
</div>
<div class="gal_name">
Some name
</div>
</td>
Where td_name position is set to relative and action is set to absolute. This should work, but not this time.
What am I missing here? Se full code example on jsFidle.
NOTE
I'm trying to position the action DIV inside the <td class="td_name">.
If your jsFiddle stills shows the iconset_16px divs in the top right corner of the HTML window in jsFiddle, then your example is not working either.
#sim_gallery .defaultList tr td.name { position: relative; width: 200px; height: 100px; }
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;}
NOTE 2
This is for everyone that is not familiar with the usage of tables.
In the early 90's it was very popular and very simple to use tables for page layout. But designers soon understood that changing layout was a pain in the a**. The use of tables also have several more disadvantages.
So yes, you can design anything without ever using tables.
So when do yo use tables? Tables are normally used for displaying tabular data. It's kind of Excel sheet for the web. My experience is that it's much easier to structure table data, than list elements and div's. So in some cases I use tables knowing that this will not have any negative effects on the website what so ever.
So please, do not start a debate about how bad is is to use tables. Use your energy to help me solve my problem :)
After some more testing, it looks like it's not possible to position a table cell. Which kind of makes sense. But I wasn't trying to position the table cell itself, but the content inside the cell.
After some more research on the web (and some useless debate here), I found this article. This basically gives me the short answer: No, it's not possible.
In their example, they use jQuery. But since I still want to do this using CSS, I came up with an alternative solution.
I simply wrap my content inside a DIV in the table cell, and make sure this DIV is as large as the table cell. Voila, all is good :)
.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft { float:left!important; }
<table>
<tr>
<td>
<div class="wrapper">
<div class="actions">
<div title="Update" class="floatLeft iconset_16px"></div>
<div title="Settings" class="floatLeft iconset_16px"></div>
<div title="delete" class="floatLeft iconset_16px"></div>
</div>
<div class="gal_name">
<a title=" Adventure" href="#"> Adventure</a>
</div>
<div>
</td>
</tr>
</table>
Don't know entirely what you're trying to do,
but have you tried setting position: relative on your <td> and then
adjusting the position of your icons as needed?
http://jsfiddle.net/Z3kpr/1/
Your div elements under actions are floating left with your !important flag (bad idea for this very reason) so they are ignoring the positioning of their parent.
Remove the float and they will be positioned properly.
Here's your updated fiddle with one of them fixed so you can see the difference.
http://jsfiddle.net/u9p4u/1/
Good evening,
I was wondering what the best way to go around getting this picture to be a reality on my website with CSS. The easiest way I can think to do it is using a table but as we all know, tables are evil.
I know about floating left and right and such, but I can only really think of that managing two, maybe three columns and I'd like an indefinite amount. I've also seen ways of positioning absolutely from the left and right edge and such like, but I'd like them to be able to stretch, grow and move depending on the size of the web page.
Thanks,
Harry
<div style="float: left; padding: 10px; border-style: dotted;">div1</div>
<div style="float: left; padding: 10px; border-style: dotted;">div2</div>
<div style="float: left; padding: 10px; border-style: dotted;">div3</div>
<div style="float: left; padding: 10px; border-style: dotted;">div4</div>
<div style="clear: both;"></div>
EDIT: if you wanna do it with flot right instead you must swap the order of the div's namings div4 div3 div2 div1