I want to have a list with fixed height and inside items in one row. If the amount of items exceed the width, I want an overflow-x scroll so the items shouldn't be pushed to next row.
So far i've played around with inline-block for ul/li and float left for divs but they all get pushed to the next row..
Thanks for your help!
Try this:
.container {
overflow: auto;
white-space:nowrap;
width: 500px;
}
.item {
padding: 10px;
border: 1px solid red;
display: inline-block;
vertical-align:top;
margin-right:20px;
white-space:normal;
}
Working example: https://jsfiddle.net/3dsign/gw35yq9p/
Instead of using display:inline-block and floatings ,try learning Flexbox which its much easier and has incredible features :Flexbox Tutorial
So if you want, use this:
.container {
overflow: auto;
display:flex;
justify-content:space-around;
}
.item {
padding: 10px;
border: 1px solid red;
vertical-align:top;
white-space:normal;
}
Related
I have an outer div and 2 inner divs - one left-alignd and another is right next to it. The issue I am having is that the left div is shorter then the right and then right wraps around the left.
Below is my html and CSS:
<div id='green'>
<div id="orange">test</div>
<div id="red">
Effects<br/>
Add Class<br/>
Color Animation<br/>
Easing<br/>
Effect<br/>
Hide<br/>
Remove Class
Show
Switch Class
Toggle
Toggle Class
</div>
</div>
and here is CSS:
#green {
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange {
width:185px;
border:10px solid orange;
float:left;
}
#red {
border:5px solid red;
width: 100%;
display: block;
}
My question is how can I prevent the right div from wrapping around the left? Preferable without setting a margin on the right div.
I also want the red div to always be on the right of the orange div, never going under it or wrapping around it, even if the page is resized or if the page is viewed on a mobile browser
You can use flexbox for this. Using the following changes to your CSS above:
#green{
display: flex;
align-content: top;
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange{
align-self:flex-start;
width: 185px;
border:10px solid orange;
}
#red{
width: 100%;
border:5px solid red;
}
If you want #orange to be the same height as #red, remove align-self: flex-start
Demo: http://codepen.io/anon/pen/YwOjyP
I got it working by adding display: inline-flex; to #green.
Look: https://jsfiddle.net/4k1ohc10/
By the way, you didn't ask for a specific browser, so you can check this page: http://caniuse.com/#feat=flexbox
In the following code, the #wrapper div contains the #left and the #right div. But they do not turn out to be contained inside the #wrapper div.
I want them to be treated as the content of the #wrapper div, so they are contained inside it, leaving the 10px padding applied to the #wrapper. Why are they displaced?
JSFiddle here.
<div id="wrapper">
<div id="left">Alpha</div>
<div id="right">Bravo</div>
</div>
The CSS is as follows.
#wrapper {
background-color:grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding:10px;
}
#left {
background-color:yellow;
float:left;
}
#right {
background-color:pink;
float:right;
}
I want to solve this without manipulating position attributes of the #wrapper as that might disrupt the normal structure of my page (I'm afraid so).
Because you are floating them so they sit outside of the DOM flow. If you want the parent to consider them, add overflow: hidden to the parent CSS or add a div at the bottom of the container with the rule clear: both;
Demo : http://jsfiddle.net/cros1mrv/1/
You should set the overflow of your wrapper to overflow: auto to flow around your floating divs.
#wrapper {
background-color: grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding: 10px;
overflow: auto;
}
See this fiddle.
Because of floating. One way to clear that is to use:
#wrapper {
overflow: hidden;
}
So I have been working on my first website, and I'm having lots of fun doing it.
However, I have found it very difficult to achieve centering a paragraph (spanning more than one line) vertically and horizontally inside of it's div container.
The div has a proportional width (96%), and it is not set by pixels. Also, the paragraph has a set amount of padding (ex: 20px top and bottom).
Is there a trick to center vertically and horizontally in this situation?
Thanks a bunch!
See this fiddle - http://jsfiddle.net/zv2Pu/1/
I have centered p both horizontally and vertically within the div container.
Hope this helps!
From you 2 examples:
a single container inside a sized box:
you can use a pseudo to vertical-align pseudo and inside boxe aside each others
DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
text-align:center;
}
.holder:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.holder p {
display:inline-block;
vertical-align:middle;
width: 70%;
margin: 20% auto;
text-align:left;
}
A single or several boxes inside a sized box:
you can use display:table-cell; DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
display:table-cell;/* it will expand if content grows oversized */
vertical-align:middle;
}
.holder p {
width: 70%;
margin: 10px auto;
}
.holder div {
width: 70%;
margin: 10px auto;
}
You could have simply used text-align: center; on your div.
How can I align text in the center of a div without using height, line height and padding?
<div id="slot">
<p id="element">100 </p>
</div>
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
}
#element {
text-align: center;
}
I supose that you want to align vertically right? I don't know if I've understood well what you are asking, but I've done this.
HTML
<div id="slot"><p id="element">100 </p></div>
CSS
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
display:table;
height:150px;
text-align: center;
}
#element {
display:table-cell;
vertical-align:middle;
}
I only added three lines in CSS. display:table for the parent and display:table-cell for the child. Finally I added vertical-align: middle to display the text on the middle if the height increments, and put text-align:center at container div.
Here you have an example
The text-align is a property to be set on the parent really, so put it in the #slot css
http://jsfiddle.net/uFpCL/
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
text-align: center;
}
If you want the content of the #element tag to be centered, take #newpatriks' approach. But if you want the #element to be in the middle of the #slot element, you could add this css to the #slot element:
#slot {
display: table-cell;
text-align: center;
vertical-align: middle;
}
This way, all children of #slot will be centered in there.
http://jsfiddle.net/A7S8h/3/
I think you should explore the flexbox. Its supposed to be the Holy Grail of layouts using css. A quick tutorial:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use margin to adjust your text
#slot {
margin:auto;
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
text-align: center;
}
it works fine now try ..
jsfiddle
I see this is pretty outdated question, but in case someone still looking for answer, here is the simple solution for 2022:
just set class to element .centerInsideDiv and in css:
.centerInsideDiv {
display: grid;
justify-items: center;
align-items: center;
Hope i helped somebody today!
Aim : I want to make my divs floating next to one another like this.
http://jsfiddle.net/x8Abc/1/
.post {
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
Problem : when I have a content which of of more length in an in between div, then it is pushing the div below it to side like this.
http://jsfiddle.net/W3afJ/
.post {
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
How can I achieve a uniform well packed layout like jsfiddle.net/x8Abc/1/ ?
You need to use display: inline-block in this situation.
Amend your css like so:
.post {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 25%;
zoom: 1;
}
Here's a fiddle as well
To align the blocks vertically change the vertical-align css property, e.g.
.post {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 25%;
zoom: 1;
vertical-align: top;
}
For more information on making display: inline-block work in IE (as I have done above) see here:
https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
You have a few different options:
Give each of your posts a fixed height, and set the overflow property to auto. This will (obviously) ensure that each is the same height and so avoid the issue where one floats next to its sibling, but will add scrollbars to divs with a lot of text, and blank space to the bottom of those with little (see it here):
.post {
float: left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
height: 250px;
overflow: auto;
}
Stick with float to lay out your posts, and ensure that the first post in each row is cleared (see it in action) . That can be achieved like this*:
.post:nth-child(3n + 1) { clear:both; }
Change your approach to laying out your posts to use inline-block, like this:
.post {
display: inline-block;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
There is a fork of your original example here. I would recommend going with this approach, as it gives you the ability to vertically-align your posts as you see fit, and won't restrict the amount of copy in each like option 1. This article is a good read, and details how to get it working even in older browsers.
* Note that IE<9 won't support the nth-child pseudo-class, so you'd need a JavaScript fallback for those browsers.