I would like to position a list beside a floating box. The Problem ist, that the bullet points of the list items are displayed outside the principal block box. So the text of the items is aligned with the normal text, but not the bullet points.
Here's the code example: http://codepen.io/Juuro/pen/oelqm
If I use list-style-position: inside; it works as expected for items which are single-lined.
Another solution would be to put the whole list in a additional box or give it display: inline-block;. But then the list items would float around the box anymore.
My requirements are:
Bullet points beside the floating box should indent like without a floating box.
In multi-line items the bullet-point should stay "outside" of the text.
The list should still float.
Is that even possible?
Is this what you want? http://codepen.io/anon/pen/ueaiy
It seems your li in the stylesheet was inside the ul.
seeing your example and if not indented to decide what you can specify dimensions of the container tightly with a picture like this DEMO
.imagebox {
float: left;
margin: 0 10px 10px 0;
height: 200px;/**add**/
width: 170px; /**add**/
}
or in this class to the IMG tag to set a fixed size
Related
My <ul> element has some <li>'s containing text, and one containing an image. I want them to appear in a single line, centered horizontally within the parent element, and also their <li> contents centered vertically and horizontally. I have the following code:
http://codepen.io/littlemissintrovert/pen/NqqLRr
By far, it's going great, however, I have an issue with the <li> containing an <img>. It's positioned higher than other <li> elements.
I can't find much resources to help me with this issue. Maybe I suck with searching but I found this link: List items appearing below other list items containing images. It seems we have the same problem and someone suggested there to use:
display: table-cell;
vertical-align: middle;
However, when I try to use it, I am unable to center the <ul> horizontally, relative to the size of its parent container. Plus, I can't space out my <li> elements using margin.
As much as possible, I really want to avoid defining the width. I want my elements to span across the screen 100%.
for fixing img issue
Add display:block to the a tag as it is a inline element
Add vertical-align:middle for the img tag as img is a inline element it will align it vertically middle
you can also use this technique to add the margin on the left side of the li
#mainnav li + li{
margin: 0 0 0 3em;
}
which will only give style to the next element
demo - http://codepen.io/victorfdes/pen/pJJORw
Just add vertical-align:middle to image will solve your issue:
Check your updated Codepen Here.
I am able to center horizontal list with text-align:center, but I wonder how can I keep it centered inside container, but has rows aligned left.
My container has percent width, so I need it working when resizing window and blocks are reordering
Please check the sample image below to understand my problem:
UPDATE:
Please find JsFiddle as per request
I need to center my <ul> inside div.container
Use this:
ul {
margin: auto;
}
li {
float: left;
}
See this fiddle:
You already know to center the <ul> with margin: auto;
The key is to adjust the <li> within it.
You can do that by using float: left;
Alternatively: you can set display: inline-block;
Both have a similar effect, but aren't identical. Play w/it.
By providing margins & percentage widths, you can play w/size and separation of the elements.
Since these are all block-level elements, they'll stack up & wrap automatically.
By floating or changing display of the <li> you keep them left-aligned within their parent element (the <ul>).
Also, by using separate CSS classes instead of targeting the <li> element directly, you leave things flexible in case you want to have a right-aligned list, or some other options later.
Wrap your boxes within another div.
You can then center that div with display: block; margin: 0 auto;, while keeping the boxes left-aligned.
can we take this existing fiddle (solution) for a bar chart and apply different height values,
http://jsfiddle.net/RYBFF/1/
what actually happening is the bar items are anchored to top of ul container whereas it should be anchored to the bottom when we scale items.
li.different {
height: 80px !important;
}
for instance applying different class to one of the list items will demonstrate the problem.
change display mode to inline-block
remove float: left;
And eventually add some margin to the first item in the list.
vertical-align only applies to inline or inline-block elements. Your list items were block elements.
fiddle
I've got a few divs (multi-column page) with "display: inline-block" set. Shouldn't this prevent them from wrapping? I want them all side by side:
div.LabelColumn
{
display: inline-block;
padding: 10px 0 0 40px;
vertical-align: top;
}
div.DataColumn
{
display: inline-block;
padding: 10px 0 0 5px;
vertical-align: top;
}
To clarify, I want the DIVs side by side – i.e., shown as columns. I want them each to take up as much room as they need. Each of them, using what I want to display, should only take up about 100px, so there is easily enough room to display a few columns side by side. The first column will have a label, the second a bit of data, the third a label, and the fourth a bit of data.
To give a higher level view of the page, I have a div which I am floating left. To its right, I want the multiple columns of data. By the way, this is working in Chrome, but not in IE.
I would like the width to automatically adjust to be as wide as the text in the DIV, if possible.
Remove inline block, use floating, assign width, and padding margin.Here is the demo
Using inline-block does not prevent elements from wrapping. In fact, when applied to div elements it will do the opposite.
use float. for more information: http://css-tricks.com/all-about-floats/
If you want them all side by side, their containing element needs to have enough width to allow so. You can prevent wrapping causing breaks within the elements by applying whitespace: nowrap;, but this may have other effects depending on how you've structured your markup.
In the screen shot you see a list of items on the left (not floated) and a display box on the right (floated). How can I prevent the left item's li element from cutting into the display box. The li content follows the flow and breaks to a new line before running into the display box, but the li element, as in the container, does not.
Li items on the left:
border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;
Display box on the right:
border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;
Thanks,
Ryan
AFTER ROBERT'S SUGGESTION:
RESPONSE TO TIM B
The widths are dynamic on different pages, dynamic as in different per page, but they won't change on a per page basis, except for the li elements that go beyond the display box. Just like when you float a pictures to the left and the text sits on the right of the pictures, but once the pictures ends, the text continues underneath the image all the way to the right edge of the page, that's what I want in reverse. So I want the li element to go to the left edge of the right display box, but past the box, I want to go to the edge of the page. The text itself conforms to this, but for some reason, the li element does not recognize there to be an "object" to prevent it from stopping and cutting into the display box. The reason it doesn't recognize it is because of the right floated display box, which breaks things from the normal flow, but I would think there has to be a way to either manipulate the display box to it can be recognized or manipulate the li elements so they can recognize the display box.
If you float an element and not others then you will run into these issues. Try floating the ul element and also giving the items widths.
If you knew what the max width of the right hand column would be, you could add margin-right:00px; to either the list items or list itself.
Since the text is doing what you want, but not the LI that contains it, I am thinking LI is being rendered as a block level element (http://htmlhelp.com/reference/html40/block.html). Try setting it to display:inline-block.