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 */
}
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;
}
I'm attempting to center a div and fill in to the left and right with divs.
The center div will be text of variable length, and the sibling divs will be lines filling in the available space.
Here's what I envision it looking like:
Here's the markup:
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'>
<a>Link Text</a>
</div>
<div class='lines'></div>
</div>
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'>
<a>Really Long Link Text that is still centered</a>
</div>
<div class='lines'></div>
</div>
Here's the barebones css:
.lines {
display: inline-block;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}
.heading {
text-align: center;
display: inline-block;
}
.heading-link {
display: inline-block;
}
The key point is that the text in .heading-link is variable in length, and I would like the .lines divs to fill the remaining space to the left and right of .heading-link
I don't want to set a percentage width on .heading-link because I don't know how wide the text will be. Should I be using a table based layout? Or just inlined divs?
Solution Using CSS Tables
The following might be close to what you need.
Your HTML is good as is:
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'><a>Link Text</a></div>
<div class='lines'></div>
</div>
<div class='heading'>
<div class='lines'></div>
<div class='heading-link'> <a>Really Long Link Text that
is still centered</a></div>
<div class='lines'></div>
</div>
Try the following CSS:
.heading {
text-align: center;
display: table;
margin: 30px 0; /* for demo only */
}
.lines {
display: table-cell;
width: 48%; /* the exact value is not that critical... */
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}
.heading-link {
display: table-cell;
white-space: nowrap; /* keeps the text from wrapping... */
padding: 10px 20px; /* for demo only, as needed... */
}
How This Works
Apply display: table to the parent container .heading, and then display: table-cell to the child elements .lines and .heading-link.
I am using the table display type to take advantage of the auto-sizing features of table cells.
I am assuming that your .heading-link text will fit on one line, so I force the text to stay on a single line by using white-space: nowrap. This will force the .heading-link element to expand to contain the text. You can use padding to control the white space as needed.
For the left and right .lines elements, set the with to be something like 48%. This will keep force the left and right .lines elements to compute to the same width, half of whatever space remains after the space used up by .heading-link.
You can also specify an overall width to .heading if needed.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/eyGdG/
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/
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.
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>