I know it is possible to evenly space divs with the same width inside of a fixed width container, but what about fluid width container?
I plan to have 28 divs with no space between them side by side. Twenty six will have a single letter of the alphabet, one will have the text 'all' and the last will have a pound sign in it.
Is this possible? Probably with CSS3 calc? If so how can I accomplish what I want?
Yes, you can just float the divs, and set their width to 1/28th of the width of the parent using the % unit:
http://jsfiddle.net/GgrKU/
#parent {
outline: 1px solid red;
overflow: hidden
}
#parent > div {
width: 3.5714%;
float: left;
text-align: center;
}
Related
I'm playing around with a slide menu. I need the content div to have a width of 100% and menu to have width of 16% (it's a long story). Of course, this results in the content div being pused to the next line. Is there a way to keep the inner divs on the same line, even though total percenatge is greater than 100%, with the right part of the content div off the screen? Here is the jsfiddle
Give a white-space: nowrap; to the #container element then override that declaration on its children elements:
EXAMPLE HERE
#container {
overflow: hidden;
white-space: nowrap;
}
#container > div {
vertical-align: top;
white-space: normal;
}
In addition you may need to use vertical-align: top; to align the inline block elements (the columns in this case) vertically at the top of the #container.
16.6 White space: the 'white-space' property
This property declares how white space inside the element is handled.
Values have the following meanings:
nowrap value
This value collapses white space as for 'normal', but suppresses line breaks within text.
Also mind the gap between inline block element. Tabs and new lines in HTML counts a white space.
Additional to white space in #container you can use overflow:hidden and float:left to #menu element to prevent an issue when menu contains large text:
#menu{
width:16%;
border: 1px solid blue;
display:inline-block;
overflow: hidden;
float: left;
}
fiddle
I want to simply center 2 divs horizontally regardless of the screen width and without using a wrapper. I have the following simple code:
#div1 {
display: inline-block;
width: 100px;
border: 1px solid #000000;
}
#div2 {
display: inline-block;
width: 200px;
border: 1px solid #000000;
}
I created the following fiddle for illustration:
http://jsfiddle.net/axe89/
The reason I don't want to use a wrapper is that I want to make a cross platform website and if I define a width for the wrapper it will break mobile screen.
#setek has the solution above, just wanted to add this quick rule of thumb:
To horizontally center display:inline and display:inline-block items, use text-align:center;.
To horizontally center display:block items, use margin: 0 auto;.
as alluded to by setek, you can define a container for your divs, with a width of 100% so that it scales with the screen/device width. Also set its text align to center to achieve your desired effect.
#container{text-align:center;width:100%;}
here is your updated fiddle
and for slightly modified markup and css - http://jsfiddle.net/axe89/5/
Use css margin properties.
margin-left:40%
to the first div.
You can add
text-align: center;
to the body tag or to whatever you are planning to wrap the divs with.
fiddle link
I have a div with a variable width, and I have a variable amount of children inside this div. I want the children to fill up the space inside the div. I first tried to change the div to display:table and the children to display:table-cell but I ended up all the children filling up all the space and not obeying their width and max-width properties. Then I've tried the table approach: I've changed the div to a table (yes, I know, it's not recommended, that's why I'm probably here asking) and wrapped the children into a tr and each in tds, but I ended up all the children cells filling up the whole space, but aligned to left (I've set the children divs display:inline-block):
If I change the alignment to center, I get this:
They are centered, but I still get spaces on the left and right of the parent (with the yellow background that I've set for distinguishing). What I actually want is this:
I've achieved this by setting the first td to align text to left, the second to center, the third to right. But I may have more of these thumbnails, so I need a general solution.
How can I lay out a variable number of children inside a container to fill the width, with the first element starting at the exact left border of the container (unlike the second image) and the last element ending at the exact right border of the container (like shown in the third image)?
Something like this?
HTML:
<div>
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
</div>
CSS:
div{
background: #ff6;
text-align: justify; /* Important */
font-size: 0; /* Used to remove spaces */
}
div:after{ /* Used to create a new last line */
content: '.';
display: inline-block;
width: 100%;
height: 0;
overflow: hidden;
}
span{
display: inline-block;
height: 150px;
}
/* Use your widths, min-widths and max-widths here: */
#s1{
background: red;
width: 15%;
min-width: 50px;
max-width: 150px;
}
#s2{
background: green;
width: 40%;
min-width: 50px;
max-width: 250px;
}
#s3{
background: blue;
width: 40%;
min-width: 50px;
max-width: 200px;
}
Demo
You can obtain equally spaced boxes using text-align: justify on the wrapper. The problem is that it doesn't work for the last line (which in this case is the first too), so you can either use text-align-last, or an :after pseudo element with width: 100% in order to create a new last line.
I need both divs to have dynamic width.
The gray one has to be centered, while the blue one to float right BUT both be horizontally alingned.
These to are sitting in a wrapper.
The problem is that in order to have varying width I use display:block and this makes the gray div to push the other one down.
How can I manage this without setting a fixed width for the gray div?
EDIT
This is how it should look like. I just put another left floating div.
The red div has to be perfectly centered.
All divs' width must be dynamic.
You can nest the blue div within the grey one and absolutely position it, using left:100% will make it horizontally dock to the right side of the grey div.
Just one of many options.
Here is a demo: http://jsfiddle.net/HnsEx/
Here's a fiddle :)
fiddle
and css
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
How come in this example, http://jsfiddle.net/eVdFH/ the divs don't align?
And what do I need to do in order to make them align in the center?
Theoretically for the "navigation" it should be set to center, set width of 600px, then moved left 300px so it is in the center
Why don't they align in the center then?
Should be:
#navigation {
margin-left: -322.5px;
}
Because you have padding: 20px; and border: 2.5px on that element.