I'm trying to add vertical space between some sections of a page by adding a bottom padding to the section containers, but I can't get it to work. I assume that it has something to do with the fact that I've got un-ordered lists inside the containers and that the list items are floating (using float: left;).
I have also tried with margins and what not, but to no avail.
Either float the containers left or set overflow to "auto." With either solution you will still need to set a margin to create the aforementioned spacing.
#developers, #contributors, #playtester {
overflow:auto;
}
Floating your containers left, as well, and then adding bottom margins should fix it
#developers, #contributors, #playtesters
{
float: left;
margin-bottom: 30px;
...
}
Related
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.
I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.
I thought with text-align: justify it will work, but it doesn't.
Here is the JSFiddle: http://jsfiddle.net/qGw48/
Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)
just change:
div#container > div {
display: inline-block;
}
to:
div#container > div {
display: table-cell;
}
UPDATED FIDDLE
This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:
box-sizing: border-box;
http://jsfiddle.net/qGw48/1/
This means that when you set a width then the padding will be included in that value.
Have you seen this http://jsfiddle.net/cUCvY/1/
I think It solves what your looking for
Two Divs next to each other, that then stack with responsive change
you could add some margin to one of the boxes ie
.left{
margin-right: 5px;
}
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 have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>
I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?
Thanks for any help.
you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/
You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.
http://jsfiddle.net/gAGKh/22/
Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)
Try setting an explicit width on the parent div that allows for all of them to exist side by side.
ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)
You need to:
Make the <li> also float.
Set fixed width to each <ul>.
Set fixed width to the containing <div>, enough to hold all the lists.
For example:
ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left; }
div { overflow-x: scroll; width: 750px; }
Test case.