I would like to align via CSS the following div elements inside a td.
I have:
<table>
<tr>
<td style="width:300px;height:300px">
<div id="div1">hor+ver center alignment</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>
</td>
</tr>
</table>
Can you please help me to prepare a stylesheet for this?
I've tried with inline-block display, but without a good result.
Thanks!
ok, this may be an overkill, but here it is:
First of all I'd suggest you wrap them with another div just to have a little more control
<table>
<tr>
<td style="width:300px;height:300px">
<div class="wrapper">
<div id="div1">hor+ver center alignment</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>
</div>
</td>
</tr>
</table>
Then the styles:
.wrapper {
position: relative;
height:100%;
text-align: center;
}
.wrapper:after {
height:100%;
content:'';
display: inline-block;
vertical-align: middle;
}
#div1,#div2,#div3 {
display: inline-block;
}
#div1 {
vertical-align: middle;
}
#div2 {
position:absolute;
top: 0;
right: 0;
}
#div3 {
position:absolute;
bottom: 0;
left: 0;
}
the vertical-align:middle trick I personaly love and use a lot, and some absolute positioning.
And here's the demo http://jsfiddle.net/pavloschris/vVHvd/
Like this jsFiddle example?
#div1 {
text-align:center;
}
#div2 {
position:absolute;
top:0;
right:0;
}
#div3 {
position:absolute;
bottom:0;
left:0;
}
td, table {
border:1px solid #999;
}
td {
position:relative;
}
Without knowing the width of the first div, it's not going to be possible to pull off dynamically set horizontal alignment. It should automatically center vertically.
For the rest, you can use absolute positioning, like so:
<td style="width:300px;height:300px;position: relative;">
<div id="div1">hor+ver center alignment</div>
<div id="div2" style="position: absolute;top: 0px;right: 0px;">top right</div>
<div id="div3" style="position: absolute;bottom: 0px;left: 0px;">bottom left</div>
</td>
Related
I want to make 3 divs(left, middle, right) in one line, the left and right divs with fixed width, while the middle one with expanding width(with percent use).
So far I tried couple of variants, but nothing do the job.
I want it something like that:
[...150px...][...100%...][...150px...]
While at the middle I'll be able to put a text that will brake line normally(without inline).
Sorry for my bad english.
I need it as much as possible adaptable for cross-browsering.
You can do like this:
.div1{
width: 150px;
float: left;
}
.div2{
width: 150px;
float: right;
}
.middiv{
width: calc(100% - 300px);
margin: 0 auto;
}
But I would recommend you to use width for middiv by calculating yourself. For eg:
If the parent div width is 1000px then your middiv would be 1000 - 300 = 700px
This should work:
HTML:
<div class="table">
<div class="row">
<div class="fixedCell"></div>
<div class="cell"></div>
<div class="fixedCell"></div>
</div>
</div>
CSS:
.table{
width:100%;
height:20px;
display:table;
}
.row{
display:table-row;
}
.fixedCell {
width:150px;
display:table-cell;
background-color:red;
}
.cell{
display: table-cell;
background-color:green;
}
http://jsfiddle.net/yxt3gu11/
I would position the left and right parts absolutely and give the center a horizontal margin of 150px.
<div class="row">
<div class="left">left</div>
<div class="center">centered text</div>
<div class="right">right</div>
</div>
.row {
position: relative;
}
.left,
.right {
width: 150px;
background-color: #f99;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
margin: 0 150px;
}
Or see http://codepen.io/ckuijjer/pen/Fygow . If the left and right parts might have more content, add a clearfix to the row.
I'm trying to make a title bar with a nice centered title and a toolbar next to it. The issue I'm having is that as the toolbar grows, the title move further and further off center (and is never really centered to begin with). I've been monkeying with this for a while, tried a few searches, but can't seem to find an answer. Can someone with a bit more css experience throw me a bone please?
HTML
<div>
<span>
Section Title
</span>
<div class="toolbar">
<button>Add</button>
<button>Remove</button>
</div>
CSS
div { background:red;overflow:hidden; text-align: center; }
span a {
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
.toolbar {
float: right;
}
Here's a fiddle:
http://jsfiddle.net/scottvossen/cePe3/124/
You're going to want to use position: relative on the outer div and position: absolute on the inner div. You can learn more about positioning divs here.
FIDDLE. I also centered the text vertically.
HTML
<div id="background">
<div id="centeroutline">
<div id="centertext">
Section Title
</div>
</div>
<div class="toolbar">
<div id="buttons">
<button>Add</button>
<button>Remove</button>
</div>
</div>
</div>
CSS
#background {
position:relative;
background:red;
overflow:hidden;
text-align: center;
height:26px;
width:auto;
}
#buttons{
position:relative;
}
#centeroutline {
color:#fff;
display: table;
width:100%;
}
#centertext{
margin:10px 10px 0 0;
padding:5px 10px;
display: table-cell;
vertical-align: middle;
width:100%;
text-align:center;
}
.toolbar {
right:0;
top:0;
position:absolute;
}
You can add position: relative to the containing div. Then absolute position the toolbar in the corner.
div{
position: relative
}
.toolbar{
position: absolute;
top: 0;
right: 0;
}
FIDDLE
<div class="row">
<div class="column fixed"></div>
<div class="column flexible"></div>
<div class="column fixed"></div>
</div>
Where .column.fixed are both of a fixed width and column.flex is the full width between those.
The only way I know is using positioning, but I'm wondering if it can be done using display: table-cell.
Codepen: http://codepen.io/bernk/pen/leCxm
Clean and responsive. Pure CSS. No messing with display property.
<div id="layout">
<div class='left'></div>
<div class='right'></div>
<div class='center'></div>
</div>
<style>
.left {
width: 20%;
float:left;
background: red;
}
.right {
width: 20%;
float:right;
background:blue;
}
.center {
margin:0 auto;
width: 60%;
background:green;
}
</style>
Fiddle: http://jsfiddle.net/N75Rn/
As you note, you could use display:table
option 1: display:table
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit content</div>
<div class='cell'>expand content</div>
<div class='cell'>fit content</div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
width:1%;
border:1px solid black;
height:10px;
}
.cell:nth-child(2) {
width:100%;
}
option 2: floats
....or, you can use floats
Demo Fiddle
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
border:1px solid black;
height:10px;
}
div:nth-child(1) {
float:left;
width:40px;
}
div:nth-child(2) {
float:right;
width:40px;
}
div:nth-child(3) {
overflow:hidden;
}
I like to do this kind of layout with position: absolute on the fixed-width elements and a padding value on their parent equal to their width.
It has an advantage in RWD/SEO since the order of the columns doesn't matter. Also, the contents of the flexible element won't leak out below the fixed-width elements when the flexible element is higher than them, which may or may not be desirable depending on your design.
The disadvantage to this is that the fixed-width elements are taken out of the content flow, meaning you may have to, somehow, compensate for their height if they're higher than the flexible element and if that breaks the layout.
Example:
HTML:
<div class="row">
<div class="column fixed fixed-left"></div>
<div class="column flexible"></div>
<div class="column fixed fixed-right"></div>
</div>
CSS:
.row { padding: 0 150px; }
.fixed {
position: absolute;
top: 0;
width: 150px;
}
.fixed-left { left: 0; }
.fixed-right { right: 0; }
Here's a pen with this.
Hi I want to achieve the following:
The following code works but I'm not sure if position: absolute for left upper "Name" is the wise way to do it or should I use float ?
Here is the html
<div class="bodyframe">
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
And the css
![.bodyframe {
}
.upperbodyframe{
}
#leftupperbodyframe{
text-align:left;
border: 1px solid ;
position: absolute;
}
#rightupperbodyframe{
text-align: right;
}]
i would use floats here. there's really no reason for the position:absolute here as well.
.upperbodyframe {overflow:hidden} /* or div will collapse with only floated elements inside */
#leftupperbodyframe {float:left; border: 1px solid ;}
#rightupperbodyframe {float:right;}
You can do this with two method.
First Method
.upperbodyframe{
width:100%;
position:absolute;
}
#leftupperbodyframe{
position: absolute;
left:0px;
}
#rightupperbodyframe{
position: absolute;
right:0px;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Second Method
.upperbodyframe{
width:100%;
}
#leftupperbodyframe{
float:left;
}
#rightupperbodyframe{
float:right;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Thanks,Arun Krishnan
<div>
<h1>Title</h1>
<table>
...
</table>
</div>
Now, the
<h1>
has a margin: 0;
so it is at the top of the div. The height of the div is 300px.
However I'd like the table to be placed at the bottom of the div, eg. valign="bottom" but for the whole table.
Here is what Remy Sharp suggested:
<style type="text/css" media="screen">
#container {
position: relative;
margin: 0;
height:300px;
border:1px solid #000;
}
#container h1 {
margin:0;
}
#tableLayout {
position: absolute;
bottom:0;
border: 1px solid #c00;
}
</style>
<div id="container">
<h1>Title</h1>
<table id="tableLayout">
<tr><td>example cell</td></tr>
</table>
</div>
Looks like it works!
I posted it here so it will always be here.
Try this: http://jsbin.com/emoce
Though it's similar to Darryl's solution. Except I'm not using position:absolute on the wrapping div, but rather position: relative to make the table's position absolute to that.
What about this:
<style type="text/css">
#container {
position: absolute;
margin: 0;
height:300px;
border:1px solid #000; }
#container h1 {
margin:0; }
#tableContainer {
position: absolute;
bottom:0; }
</style>
<div id="container">
<h1>Title</h1>
<div id="tableContainer">
<table id="tableLayout">
<tr><td>...</td></tr>
</table>
</div>
</div>
The only problem is that both the container div and the tableContainer divs need to be absolute positioned. Not sure if this will work for your layout.