I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO
Related
I took a solution from here earlier to solve some div alignment problems, just when I thought all was sorted - adding an image into any of my containers causes text to be misaligned elsewhere, see image and code below.
The image in the code is just a blue rectangle, any image will do.
Does anyone know how I can resolve this?
<style>
.row {
display: table;
width: 98%;
min-width: 440px;
border: solid 5px black;
border-top: none;
margin-top: -4px;
}
.left {
width: 150px;
border-right: solid 5px black;
display:table-cell;
background-color: black;
}
.middle {
width:auto;
display:table-cell;
font-size: 9.5pt;
padding-bottom: 20px;
}
.right {
width: 150px;
border-left: solid 5px black;
display:table-cell;
background-color: black;
padding-left: 5px;
overflow: auto;
}
</style>
<div class="row">
<div class="left">
<img alt="" src="/Images/Blue.png" border="0"></img>
</div>
<div class="middle">
Text which should be at the top
</div>
<div class="right">
</div>
</div>
I want to achieve a layout like below using fix width. The width should be 600px and then I want to have some sections in the main div. And I want that the main div is aligned at the center of the page.
Im a CSS beginner and Im not achieving this result, I have a fiddle with the issues: fiddle
Its not aligned at the center of the page and also only the div .post-title is appearing properly.
Do you know what is necessary to achieve the image layout?
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div>
<div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
I updated your fiddle.
Here is the CSS in case it didn't work. Using flexbox.
.wrapper{
width: 600px;
display:block;
margin: auto;
border:1px solid gray;
text-align:center;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:left;
}
.post-info{
width:100%;
display: flex;
height: 100px;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
flex: 1;
box-sizing:border-box;
text-align: left;
}
.post-admin{
padding:20px;
box-sizing:border-box;
text-align: left;
flex: 1;
}
.post-category{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
.post-tags{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
You don't need to float everything, in fact it makes it very difficult to handle elements under your box because the floats get ripped from the document flow. Also the parent container no longer recognizes the size of the elements. You could instead use flexbox for the two elements next to each other, but for better compatibility you can also just make them inline-block.
I would wrap everything in another block (possibly just the body body if that works for you) with width: 100%; (or at least something larger than 600px) and then use margin: 0 auto; (0 top and bottom, auto left and right). I used inline-block for the date and admin blocks. Also not that you must remove the whitespace between them (I used an html comment) so they don't break.
body {
width: 100%;
}
.wrapper{
width: 600px;
display:block;
border:1px solid gray;
text-align:center;
margin: 0 auto;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:center;
}
.post-info{
width:100%;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-admin{
padding:20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-category{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
.post-tags{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
<body>
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div><!--
--><div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
</body>
The next image is currently what I have.
And this is what should be:
As you can see, the dots on the third column are not aligned. It should meet the next requirement:
As you can imagine, I might use two divs because of the two borders.
This next code is what I have tried all day long, I cannot achieve to position the dots in the middle with the background-color stretched (considering the two border colors). What am I wrong? Should I remove everything and change it by a flexbox? I'll appreciate your help.
Html code:
You have 4 items in your cart
<article class="cart-item">
<div class="left">
<img src="images/item1.jpg"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
<div class="grouped-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</article>
Css code
.cart-item
{
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
display: table;
height: 100%;
overflow: hidden;
}
.cart-item>div
{
display: table-cell;
}
.left,.center
{
padding-bottom: 10px;
padding-top: 10px;
}
.left
{
padding-left: 15px;
padding-right: 15px;
width: 33.33%;
}
.left img
{
max-width: 100%;
}
.center
{
padding-right: 15px;
text-align: left;
vertical-align: top;
width: auto;
}
.right
{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
vertical-align: middle;
width: 15px;
}
.right .grouped-dots
{
background-color: #F5F5F5;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
display: block;
height: 100%;
}
.cart-item .grouped-dots span::after
{
color: #CCCCCC;
content: '.';
font-family: 'Open Sans',sans-serif;
font-size: 40px;
line-height: 0;
}
This approach is using table and table-cells as display values. If you think I'm in the wrong path, please let me know.
It's because of this style:
.right .grouped-dots {
height: 100%;
}
Since its as tall as its parent, there's no room for it to move vertically to the "middle."
Remove that style, and move its background color to .right:
.right {
background-color: #F5F5F5;
}
Fiddle
This is my code
table#projectTable > tbody , table#productTable > tbody{
height: 300px;
overflow: auto;
}
The scroll bar is working if you click the upper part but not the lower part.
Very strange.
I used firefox inspect element and I think its something to do with the TR element overlapping because the scrollbar is working fine just above the (imaginary extended line from ) second row (Edit product info)
as i say at comments
.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}
will solve your problem.
maby you already know but if you dont may i kindly suggest you that give a chance to tableless design when you design a layout.
for example - also this sample could be better -
preview
HTML
<div id="container">
<div id="left">
Edit branchInfo
Edit branchInfo
Edit projectList
</div>
<div id="right">
<div id="table1"> ...1... </div>
<!--#table1-->
<div id="table2"> ...2... </div>
<!--#table2-->
<div id="table3"> ...3... </div>
<!--#table3-->
</div>
<!--#right-->
<div class="clear"></div>
</div>
<!--#container-->
CSS
.clear {
clear: left;
}
#container {
border: 1px solid #666;
padding: 5px 5px 0 5px;
}
#left, #right {
float: left;
}
#left a {
display: block;
width: 100px;
height: 200px;
font: 12px/200px arial;
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#left a:hover {
background: #efefef;
}
#left a:active {
background: #c0c0c0;
}
#right {
border: 1px solid #999;
margin-left: 5px;
padding: 10px;
height: 654px;
width: 900px;
}
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.