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.
Related
I have an HTML table with a column of cells containing two parts e.g.
| Cat (meow) |
+---------------------------+
| Long-dinosaur-name (roar) |
There are also other columns not shown. My users' browsers have unknown widths. On a wide one, I wish to show the cell as one line, as above. If it gets too narrow, I'm fine with wrapping
| Cat |
| (meow) |
+----------+
| Long- |
| dinosaur-|
| name |
| (roar) |
but if one line wraps, all lines must also wrap:
| Cat |
| (meow) |
+---------------------+
| Long-dinosaur-name |
| (roar) |
Without using Javascript, is it possible to do this?
I know I can use <td nowrap> to prevent wrapping, or <br> to force a wrap, but how can I make one cell depend on another?
Try using media query(CSS) with breakpoints. I know you said, the user browsers width's are unknown, but you can anticipate for different width's etc
so I am working on a game where if you touch one side of a box, you'll be propelled in that direction.
* For example: Let's say I hit the left side of the box, I should be propelled to the left.
One way I could do this, is split the box into 4 instances where each instance is on the left, right, top & bottom sides.
Is there a way for me to embed instances/ access parts of an instance, etc.
OR if there is a better way to do this can you tell me how?
I guess the answer to your question is yes; what you want to do is have a single container MovieClip with 4 internal MovieClips that will be your hit targets.
I would go for the following setup; i.e. use triangles.
------------
|\ top /|
| \ / |
| \ / |
| \ / r|
|left\/ i|
| /\ g|
| / \ h|
| / \ t|
| / \ |
|/ bottom \|
------------
if you were to do it based on coordinates, as Adam Harte mentioned, handle it like a 9-slice grid. if you imagine the centre box oversized, that will give you maximum hit areas.
-----------------
| | | |
| | T | |
-----------------
| | | |
| L | | R |
| | | |
-----------------
| | B | |
| | | |
-----------------
You could just test the x and y position of the touch inside the the box when they touch it. Something like this pseudocode:
function onTouchDown(){
if(touchX < halfBoxWidth)
{
// We touched the left side, so go left.
}
else
{
// We touched the right side, so go right.
}
}
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>
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.
I have a flex container with columns flex direction and 3 divs in it. The first and the third div take as much height as their content takes, while the second one (which I'll call A) takes the remaining space. It should be obvious, but I'll add it anyways. A's height is unknown.
Inside A I'll have a random number of images with unknown width/height. All those images will occupy a single row (just like a carousel). The images must:
occupy the biggest possible area of A, but
keep their aspect ratio, and also
don't occupy more than 1/3 of the width of the visible area of A, and also,
no gaps between the images
The second requisite I could easily accomplish with max-width: 33%, but the first one is not that easy. It seems that max-height: 100% is being ignored.
Here is a demo: http://codepen.io/alexandernst/pen/oxqBPv
And here is the expected result:
|-------------------------------------------------|\
| | \
| |---------------------------------------------| | \
| | up | | \
| |---------------------------------------------| | \
| | |
| |---------------------------------------------| | |
| | ######### | | |
| | ######### | | |
| | ################ ######### ################ | | |
| | #### 33 % w. ### ######### #### 33 % w. ### | | |
| | ################ ######### ################ | | 400px
| | ######### | | |
| | ######### | | |
| |---------------------------------------------| | |
| | |
| |---------------------------------------------| | /
| | down | | /
| |---------------------------------------------| | /
| | /
|-------------------------------------------------|/
I hope now it is what you wanted to achieve: http://codepen.io/kbkb/pen/jqzBKJ
You where missing a height to the containing div. The max-height didn´t know what 100% is because the parent element had no height. ( i now set 88% height because it was what was fitting, but you should determine the height of up and bottom and substract them from 100% e.g. `calc(100% - 20px)).
With text-align:center i am then centering the images.
Also i added box-sizing: border-box this solves the problem that when you have an element with height X and add a border of 1 px you would have height: X+2. Trough border-box the border applies inside the element not outside on top of the height.