Please take a look at: http://jsfiddle.net/yCrA8/
The blue sidebar should float next to red middle box but instead it's clearing it and sitting below...
How do I fix this? I can't set a width for the .Middle div because it has content that needs to flow outside of the browser view and be scrollable.
Cheers
See: http://jsfiddle.net/thirtydot/yCrA8/4/
One way is to use display: inline-block and white-space: nowrap.
Remove float: left from .Sidebar and .Middle, then add this:
.MainContent {
white-space: nowrap
}
.Sidebar, .Middle {
white-space: normal;
vertical-align: top;
display: inline-block;
/* if you need ie6/7 support */
*display: inline;
zoom: 1
}
#Camernon; there is a reason why your middle div is not wrap because you did not define width to your middle div for this you can define width your middle & it's parent div
CSS:
.Middle
{
background:red;
width:9125px;
float:left;
}
.MainContent
{
margin: 20px;
width: 9330px;
}
check this fiddle http://jsfiddle.net/sandeep/yCrA8/11/
Related
To vertically center <a> tag i found this solution in this answer
you may use a pseudo element displayed as an inline-box using full
height of li and vertical-aligned to midlle. DEMO
body, html {
height:100%;/ needed for demo */
}
nav {
height: 50%;/* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;/* show me li , for demo */
}
nav ul li:before {
content:'';
height:100%;
display:inline-block;
vertical-align: middle;
}
My question why we have to use a pseudo element ?
Why it's not working when I delete the pseudo element and I put just :
a {
height:100%;
display:inline-block;
vertical-align: middle;
}
Is the vertical-align have to apply to a first element (:before) and the other (<a>) will follow the vertical alignment ?
Why pseudo works?
With the before and after pseudo-elements, we can insert virtual elements before or after an element's content. They both work the same way, except that one inserts the content before the element and the other inserts the content after.
Pseudo elements forces some contents to be there in the html page and in the css stylesheet you apply a empty content with the height of 100% ie. with your tag height and now the content is occupying the space before or after (as you use pseudo) and to that align vertically with options top, middle, or bottom:
try this fiddle : just set height: 100px; and then increase manually like 200px, 300px then you will understand the exact reason
Without vertical alignment it's going to bottom as it is 100% heighty and if you use vertical-align:middle then you'll notice how the pseudo is working.
You may understand by seeing this picture:
UPDATE:
using pseudo element you are getting vertically center the text because of known height as you used height:100%; on pseudo element. As soon you will removed the height the layout will be broken.
As a tag is inline element so you made it block level element. but vertical-align: middle; only work with display:table-cell. but wait you have to use display:table in li element also.
Check the DEMO. so this piece of code will work..
a{
height:100%;
display: table-cell; /*replaced with display:inline-block*/
vertical-align: middle;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;
display:table; /*add this line*/
width:100%; /*add width as well*/
}
I have a parent div (for sake of test we'll call it #parent) and a child div (test reasons #child). #parent is absolutely positioned to the bottom of the page, with a fixed width of 100% and a height of 75px.
child is a div that holds dynamic content (being changed with jQuery). Seeing as it is dynamic, the width of the div is always different. What is the most efficient way to center this div horizontally, since the width is always unknown & different? Any help would be awesome.
The correct way to do this would be the following:
#child {
margin: 0 auto;
}
This sets the top/bottom margins to 0, and then the left/right margins to auto - which means "as large as possible". So you have two equal margins on the left and the right, filling up the space completely, and hence you have a centred div.
This will only work on block elements like divs though - inline elements cannot have auto margins. If you need to centre an inline element (like a span or some text), use text-align: center; on the parent:
#parent {
text-align: center;
}
You could set the margins to: margin: 0, auto;
For fun you could use the CSS Flexible Box Layout Module. Here is a jsFiddle demonstrating what you could do:
See working jsFiddle demo
HTML
<footer>
<div class="dynamic-content">Here is some child dynamic content</div>
</footer>
CSS
body
{
background: #ccc;
}
footer
{
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #232323;
}
footer .dynamic-content
{
flex: 1;
padding: 10px;
margin: 0 auto;
background: #545454;
color: white;
font-family: verdana;
}
Centering a div using CSS:
HTML:
<div class="center">
.... more content ....
</div>
CSS:
.center {
margin: 0 auto;
}
OR
.center {
margin-left: auto;
margin-right: auto;
}
The margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.
Try in jsfiddle
Make it display as an inline element and give the parent the property of text-align center
problem solved
#parent{
text-align:center;
}
#child{
display:inline-block;
}
Edit:
check how it works http://jsfiddle.net/ECMau/1/
Whenever I resize the browser, the 2nd div in .container positions below the first one.
<div class = "container">
<div class = "one"></div>
<div class = "two"></div>
</div>
The divs are really blank.
CSS
.container{
overflow: hidden;
width: 810px;
min-width: 810px;
}
.one,.two{
width: 300px;
height: 450px;
}
.one{float:left}
I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.
Demo
.one, .two{
width: 300px;
height: 450px;
float:left; /* Float both elements */
background: #f00;
}
Alternative
You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements
Demo
This will gave you the same effect, the only thing is 4px white space, you can simply use
.two {
margin-left: -4px;
}
the above will fix the white space issue for you
Demo 2
Add this CSS. Demo.
.two {
margin-left: 300px;
}
PS: When works with float, you should clearfix.
Give your body a minimum width:
body {
min-width: 1110px;
}
Then, when the viewport gets smaller than 1110px the scrollbar will appear.
Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).
I'm looking an elegant way to position two divs one besides the other without line wrapping. The first div is an icon the second a text of unknown size.
They should not break in two lines but hide if not enough place. I'm trying with this example, but it doesn't work.
There is a similar question, but's it's not the same scenario as size is unknown.
Help is appreciated
Write like this:
.container {
white-space: nowrap;
}
.d1,
.d2{
display: inline-block;
*display:inline;/*for IE 7 */
*zoom:1;/*for IE 7 */
vertical-align:top;
}
.d1 {
background-color:#ff0;
}
.d2 {
background-color:red;
}
Check this http://jsfiddle.net/xcSXA/5/
float: left does not give you, what you need.
Try display: inline
http://jsfiddle.net/xcSXA/3/
Instead of floating your divs, display them as inline-block so they don't wrap. Also, set the container's "white-space" style to "nowrap" to also prevent line wrapping.
HTML
<div class="container">
<div class="d1">icon</div>
<div class="d2">This can be very very very very large.</div>
</div>
CSS
.container {
white-space:nowrap;
overflow:hidden;
width: 100px;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
display: inline-block;
background-color:red;
}
Working Example: http://jsfiddle.net/C4Wfa/
.d1 and .d2 you have to give a certain width, but you gotta make sure that the width of both .d1 and .d2 together (+ margins and paddings) isn't bigger then the the container class, else they won't be able to be set next to each other.
I think, the following CSS is, what you need.
.container {
display:inline-block;
overflow:hidden;
white-space: nowrap;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
white-space: nowrap;
display: inline-block;
background-color:red;
}
You can try it with
float: left;
and create an outer div with this style:
height: 1%; overflow: hidden;
See here: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50
Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/
How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom.
As you can see, I don't know the height of the highest bar, so I don't know the height of the container.
These q+a don't help: Vertically align floating divs, Vertically align floating DIVs
Should be simple, right? If it helps: it only has to work in decent browsers.
PS. Number of bars is variable (not in the example) and their heights are. Only their widths are static. Positioning absolute won't help, because the container div doesn't have measurements.
This will do the trick:
#bars {
display: table-cell;
border: solid 1px black;
}
#bars > div {
display: inline-block;
vertical-align: bottom;
width: 5px;
background-color: #999;
margin-left: 2px;
}
#bars > div:first-child {
margin-left: 0;
}
It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need for float: left; on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.
EDIT - Per #thirtydot's comments, adding vertical-align: bottom; to the child divs removes the gap at the bottom.
Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell; so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!
FLEXBOX! Flexbox is the most bestest.
Example: http://jsfiddle.net/rudiedirkx/7FGKN/
Flexbox makes this ridiculously simple (and not to forget correct):
#container {
display: flex; /* or inline-flex */
flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
align-items: flex-end; /* bottom */
}
#container > div {
/* margin etc here, but nothing layoutish */
}
That's it Two lines of CSS: display: flex and align-items: flex-end.