I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.
Related
I have a few block-level (or inline-block, it doesn't matter) elements with pre-defined dimensions. I want them at the top-right portion of a container div. I want them being positioned one next to the other, from top to the bottom. When there isn't enough space, I want a new column at left of the previous one, also going from top to the bottom.
In other words, I want something like this:
.------------.
| 4 1 |
| 5 2 |
| 3 |
'------------'
How can I achieve it using a pure-CSS solution with a clean HTML?
Even better if it can adapt itself to the available height.
Alternative effects that I can achieve (but are not what I want):
With a combination of column-width: <something>; column-gap: 0;, I can achieve this effect:
.------------.
| 1 4 |
| 2 5 |
| 3 |
'------------'
With float: right;, I can achieve this effect:
.------------.
| 3 2 1 |
| 5 4 |
| |
'------------'
If you change the writing mode, you can get the columns module to do what you want:
http://tinker.io/9f846
ul {
columns: 10em;
direction: rtl;
}
li {
direction: ltr;
}
I have a page in which I have a structure of divs in an inline block. Now each of the block divs have a minimum size and when the window size reduces to a size smaller than the sum of all the inner divs minimum width, I move some of the elements to the next line. I would now like a padding to be added to the div which moves to the next line alone and I am not looking to use js to achieve this. How can I do this in just CSS?
<div width="100%">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
</div>
Rendering
------------------- ------------------- -------------------
| | | || |
| | | || |
| div1 | | div 2 || div 3 |
| | | || |
------------------- ------------------- -------------------
constrained space
------------------- -------------------
| | | |
| | | |
| div1 | | div 2 |
| | | |
------------------- -------------------
<^margin 5px inserted^>
-------------------
| |
| |
| div 3 |
| |
-------------------
You can use media queries to apply CSS rules based on the width of the viewport.
#media all and (max-width: _width_value_) {
/* When the screen size is less than or equal to _width_value_ the css rules here will apply */
}
Here's a jsfiddle offering a solution to your original question.
margin-bottom will do the trick, however, it'll be there even when all of the divs are on one line. There's no other way without the JavaScript imho:
.innderDiv {
display:inline-block;
width: 33%;
max-width: 300px;
min-width: 135px;
border: 1px dashed;
margin-bottom: 5px;
}
http://jsfiddle.net/ruslans/KNDFE/
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.
I am trying to create a page that has a width that adjusts to the screen with a fixed width column on the right. So for example:
| | |
|-------Content------|--Column--|
| | |
| | |
|---Content---|--Column--|
| | |
| | |
|-----Content----|--Column--|
| | |
http://www.reddit.com/ would be a good example of this.
Thanks
This blog is pretty useful for grabbing complex layouts.
ultimate-2-column-right-menu-pixels
this is essentially what reddit does: http://jsfiddle.net/pxfunc/rCG84/
the side div 1.) is above content in the html, 2.) is set to float:right;, and 3.) given a specific width (width:300px)
<div id="side"></div>
<div id="content"></div>
the content div will adjust with the window size
This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>