I'm trying to get a parent div tag to hold n children div tags such that they are all on the same line, yet grouped together in the center. For example:
Here the children are blue, and the parent is red.
Here are the things I've tried:
Making blue divs display:inline to get them on the same line. Problems: doesn't display even with its width and height both set to 10px.I tried adding , but it only was a couple pixels wide.
Making blue divs float:left. Problems: Have to programmatically resize red parent to child contents since the divs are floated and then center in its parent to get what I want. There should be a solution that doesn't involve javascript.
For IE6 and IE7 compatibility you might have to add zoom:1; and *display:inline; to your child CSS
jsFiddle
.parent {width:100%;border:1px solid red;text-align:center;}
.child {width:15%;display:inline-block;border:1px solid blue;}
<style>
.container {
width: 100%;
padding: 0;
text-align: center;
border: 1px solid red;
}
.inner {
display: inline-block;
margin: 0 5px;
border: 1px solid blue;
}
</style>
<div class="container">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
<div class="inner">
three
</div>
</div>
Stick the blue divs in a container div. Find their widths (margin and padding included) and give the container div that width. Then set the container div's margin to 0 auto, stick it in the red div and you should be fine.
Try to use display: inline-block;:
.child {
display: inline-block;
...
}
http://jsfiddle.net/mupuR/
Related
I have 2 DIVs aligned horizontally next to each other and centred using a wrapper.
I use margin-right to separate DIV2 from DIV1.
DIV2 could have no content. In case DIV2 has no content, i want the margin to be ignored and DIV1 to be centred alone.
This is my CSS:
#div1 {
display: inline-block;
width: 100px;
border: 1px solid #000000;
margin-left: 200px;
}
#div2 {
display: inline-block;
}
This is HTML:
<div style="text-align:center;">
<div id="div1">Div1</div>
<div id="div2"></div>
</div>
I created a fiddle for you to play with: http://jsfiddle.net/wfrcG/3/
Is there a way in CSS to achieve this without javascript?
You could use the :empty pseudo class to set the margin to 0 if the element is empty.
EXAMPLE HERE
#div2:empty {
margin:0;
}
OK, so here is my problem,
I need to have four DIVs in one line. The First three are float:left and the fourth one is float:right. The container has a specified width.
I need the third div to fill all the space from the second div that is floated to the left, to the fourth div that is floated right.
EDIT: DIVs #1, #2 and #4 have dynamic width as well... They have a certain padding and the content defines the width.
Why not turn the question on its head, and establish how to create the layout you want- in which case, likely the simplest approach would be:
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit</div>
<div class='cell'>fit</div>
<div class='cell'>expand</div>
<div class='cell'>fit</div>
</div>
CSS
.table {
display:table;
width:100%; /* <-- will make the divs align across the full browser width */
height:50px;
}
.cell {
display:table-cell;
border:1px solid red;
width:1%; /* <-- will make 1, 2, 4 only fit their content */
}
.cell:nth-child(3) {
width:100%; /* <-- will make 3 expand to the remaining space */
}
Solution Using Floated Elements
Here is one way of doing this using floats.
Arrange your HTML as follows:
<div class="panel-container">
<div class="panel p1">Panel 1 - and a word</div>
<div class="panel p2">Panel 2 - Done. </div>
<div class="panel p4">Panel 4 - End!</div>
<div class="panel p3">Panel 3</div>
</div>
and apply the following CSS:
.panel-container {
width: 600px;
border: 1px dotted blue;
overflow: auto;
}
.panel {
background-color: lightgray;
padding: 5px;
}
.p1 {
float: left;
}
.p2 {
float: left;
}
.p3 {
background-color: tan;
overflow: auto;
}
.p4 {
float: right;
}
The trick is to place the floated elements (.p1, .p2. .p4) ahead of the in-flow content (.p3).
Use overflow: auto on the parent container to keep the floated child elements from affecting the layout outside of the parent element.
I added overflow: auto on .p3 so that the padding gets included within the containing block.
See fiddle at: http://jsfiddle.net/audetwebdesign/9G8rT/
Comments
The one disadvantage of this approach is that the order of the content is altered, that is, .p3 appears after .p4 in the code order.
Another side effect, which may be desirable in a responsive design, is that the child elements will wrap onto 2 or more lines as the parent container width gets smaller.
If you need to retain the content order in the HTML code, the CSS table-cell solution is a good alterantive.
The table-cell solution will keep the child elements on a single line regardless of the width of the parent container.
One final advangtage of the floated element solution is that it is more backward compatible than a CSS table-cell solution, but as we move forward, this is becoming less
of a compelling argument.
Look,
I tried to do this, but I'm tired.
I have this HTML:
<div id="external" style="margin: 0 auto; height:auto; border:1px solid #ccc;">
<div class="mycontent">
X, Y
<br/>
Z, W
</div>
</div>
What I want is that the "external" div have the height of "mycontent" div, but it only works when "external" has float:left defined in the styles. I cannot use "float:left" because I need the "external" div be centered always.
How can I solve it?
The height of the #external div is already the same height as the .mycontent div.
Run this jsFiddle and all you will see is the orange background I set for the .mycontent div and not the blue background I set for the #external div.
If you want the #external div to essentially wrap the .mycontent div vertically and horizontally, while at the same time being centered in the screen, use display: table and display: table-cell.
See jsFiddle demo
HTML
<div id="external">
<div class="mycontent">
X, Y
<br/>
Z, W
</div>
</div>
CSS
#external
{
display: table;
margin: 0 auto;
border: solid 1px #ccc;
background: blue; /* for demo purposes */
}
.mycontent
{
display: table-cell;
background: orange; /* for demo purposes */
color: white; /* for demo purposes */
}
is there a better way to fix the height of a child to the main parent height?
I tryed so but it doesn't works for me:
.child {
background: none repeat scroll 0 0 #5B6567;
border-radius: 5px 0 0 0;
display: inline-block;
float: left;
line-height: 30px;
padding-top: 6px;
position: relative !important;
text-align: center;
width: 12%;
height:100%
}
<div class="row-fluid">
<div class="child">
child
</div>
</div>
jsfiddle http://jsfiddle.net/WTmt6/1/
check I want the grey left div to fix the height of the red one big .media div
ps: I can't use fixed/px dimensions I only use percentage/% on my layout
I'm still not sure if I understand the problem...
First of all, remove the padding on child as it is going to cause trouble with the height:100%. You should add the padding in an inner div:
.inner {
padding:6px;
}
<div class="child">
<div class="inner">child</div>
</div>
The height 100% is working fine. Here is an example of 3 childs (two of them are equal), floating inside a floating parent without problems: http://jsfiddle.net/qRPYt/7/
If you are still having trouble, please, post the CSS of row-fluid or even better, a jsfiddle.
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.