In my html/css test page I've a div container with 2 cols.
My problem is that if I insert a div in the left column with the top margin or border, the div in the right column is not aligned at the top but is influenced by the div in the left column and I can not understand why.
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #f5f6f7;
}
.container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
.row {
margin-top: 10px;
background: #fff;
}
.row:before, .row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
.footer {
height: 36px;
line-height: 36px;
}
[class*="span"] {
min-height: 1px;
margin: 0px;
}
.span1 {
width: 958px;
display: table-cell;
}
.span2 {
width: 699px;
display: table-cell;
}
.span3 {
width: 258px;
display: table-cell;
}
.span3.dark {
background: #616161;
}
.content-center {
padding: 0px;
}
.a {
background:#FF0000;
border: 5px solid #00FF00;
margin-bottom: 10px;
}
.b {
background:#FF8040;
border: 1px solid #00FF00;
}
HTML
<div class="container">
<div class="row">
<div class="span2">
<div class="content-center">
<div class="a">LEFT PANEL <br /><br /><br /><br /><br /><br /></div>
</div>
</div>
<div class="span3 dark">
<div class="content-center">
<div class="b">RIGHT PANEL <br/> Why it is not aligned at the top ?</div>
</div>
</div>
</div>
</div>
How can I solve my problem? thanks
CSSDECK example
I've not seen this style of grid position before.
What so ever.
Do this:
.span3
{
vertical-align: top;
}
Related
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
I'm trying to make a message template as below.
<div class='message'>
<div class='from'>
<i class='avatar'></i>
<span>Name</span>
</div>
<div class='body'>
<div class='content'>Hello</div>
</div>
</div>
.message { clear: both; }
.from {
float: left;
margin-right: 12px;
}
.from > i {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #000;
}
.from > span {
display: block;
width: $avatar-width;
line-height: 1em;
}
.body {
position: relative;
}
.body > .content {
display: inline-block;
padding: 15px;
border: 3px solid #000;
overflow: hidden;
}
I'm having a hard time making the content and div.from staying in the same line. When content is too wide, the content will go to a new line. Please see http://jsfiddle.net/9h3HN/1/ for what I mean.
Any ideas? Thanks.
Did you try following?
.form {
width: 54px;
}
.body {
padding-left: 70px;
}
I need some help here. I been trying to get it right for hours and i can't find an efficient solution.
<div id="Header">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'
/>
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
Example of what im trying to do
i want to have a liquid header with an image aligned to the left and a title aligned to the center, but both of em have to align to the middle of the height, no mather if i increase img /div's height
Had to add few more divs but it works. http://jsfiddle.net/74Rnq/23/
HTML:
<div id="Header">
<div class="wrap">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
<div class="text">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
CSS:
#Header {
position: relative;
height: 200px;
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
overflow: auto;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
text-align: center;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#Header .wrap {
display: block;
position: absolute;
width: 100%;
top: 50%;
margin-top: -50px; /* Half of wrap div height */
}
#Header .wrap .text {
position: absolute;
top: 50%;
margin-top: -27.5px; /* Half of text div height */
width: 100%;
}
For modern browsers you can do it via display:table, table-row table cell:
Modify your html like this:
<div id="Header" class="table">
<div class="row">
<div class="cell">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
</div>
<div class="cell main">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
#Header {
background: #DBE6EC;
border-bottom: 1px solid #595959;
position:relative;
padding:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.cell.main {
width:100%;
}
The updated fiddle is here. This solution won't work in ie7. There is a older workaround for vertical align middle, if you have to support ie7.
Make the container div display: table-cell and each child div display: table-cell. Then you can give the child divs vertical-align: middle and they will always be vertically centered.
HTML:
<div id="Header">
<div id="image">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' />
</div>
<div id="title">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
and CSS:
#Header {
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
display: table;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#title{
display: table-cell;
vertical-align: middle;
width: 100%;
}
#image{
display: table-cell;
vertical-align: middle;
}
Aaand here's the jsFiddle.
I have some problems with <div>s. The inner <div> (content div) won't push the outer <div> (wrap_content).
Let me post the code so that you have a chance to see what could be wrong.
style.css
* {
padding: 0px;
margin: 0px;
}
body {
background: #e2e2e2;
color: #f2f2f2;
font-family: Arial;
}
#wrap_design {
width: 1139px;
}
#wrap_content {
float: right;
max-width: 963px;
height: 100%;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
}
#header {
height: 236px;
width: 963px;
background-color: #2d2828;
}
#headerimg{
z-index: 1;
margin-left: -26px;
}
#loggedin_box {
min-height: 230px;
width: 160px;
background: #2d2828;
float: left;
margin-top: 236px;
position: static;
padding-bottom: 5px;
}
#loggedin_box_green {
height: 30px:
width: 150px;
background: #73aa09;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
letter-spacing: 2px;
}
#loggedin_box ul {
border: none;
}
#loggedin_box ul li {
list-style: none;
text-align: left;
}
#loggedin_box ul li a {
font-family: Arial;
font-size: 14px;
color: #b1b2b2;
text-decoration: none;
padding-left: 5px;
}
#menu_container {
margin: 0px 0px 0px 0px;
background: #2d2828;
font-family: Arial;
width: 100%;
margin: 0px auto;
height: 65px;
}
#content {
color: black;
vertical-align: top;
height: 100%;
margin-bottom: 10px;
clear: both;
}
#content-sidebar {
border-left: 2px solid #2d2828;
float: right;
width: 285px;
max-width: 285px;
height: 100%;
}
index.php
<html>
<head>
<link rel="shortcut icon" href="images/nfgico.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<CENTER>
<div id="wrap_design">
<div id="loggedin_box">
<?php
if($_SESSION['username'] == "") {
?>
<div id="loggedin_box_green">Log ind</div>
<div style="text-align: left; padding-left: 10px;">
<form action="login_check.php" method="post">
<input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br />
<input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br />
<font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br />
<input type="submit" value="Log ind"><br /><br />
</form>
<ul>
<li>Glemt kodeord</li>
<li>Opret bruger</li>
</ul>
</div>
<?php
} else {
?>
<div id="loggedin_box_green">Network</div>
<ul>
<li>Wall</li>
<li>Profil</li>
<li>Chat</li>
<li>Achievements</li>
<li>Clanside</li>
<li>Søg modstander</li>
<li>Søg spil</li>
<li>Log ud</li>
</ul>
<?php
}
?>
</div>
<div id="wrap_content"> <!-- This is the one that needs to be pushed -->
<div id="header">
<img src="/images/banner.png" id="headerimg">
</div>
<div id="menu_container">
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><span>Forside</span></li>
<li><span>Nyheder</span>
<ul>
<li>Seneste</li>
<li>lol</li>
<li>loool</li>
<li>loool</li>
</ul>
</li>
<li><span>Artikler</span></li>
<li><span>Spil</span></li>
<li><span>Turneringer</span></li>
<li><span>Clan</span></li>
<li><span>Streams</span></li>
<li><span>Webshop</span></li>
</ul>
</div>
</div>
<!-- Content/brødtekst -->
<div id="content">
CONTENT GOES HERE THIS IS WHAT NEED TO PUSH
</div>
</div>
</CENTER>
</body>
</html>
There is some part of the code from index.php that I didn't post because I hope you don't need it :)
I really hope someone can help me!
ps. I have done some research on the internet, and learned that I should use clear: both; but I really can't get it to work.
Remove the height: 100% from your #wrap_content style (it's causing problems), and then to ensure it wraps around any float elements, add width and overflow as folows:
#wrap_content {
float: right;
max-width: 963px;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
width: auto; /* Must use this for overflow to do what you want */
overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */
}
Just as a little note, there's a fair amount of unnecessary css going on in there. I'd encourage you to go through it carefully and modify/remove it. You could do what you are after with half of the amount of css.
REMOVE all of the "height:100%;" everywhere - if does not do what you think it does.
I would suggest removing your CENTER and making your #wrap_design be like this:
#wrap_design
{
margin: 0 auto;
width: 1139px;
}
This will center your wrapper - I'd strongly advise against CENTER. If you want to change the margin top of this wrapper (ie 20px from top and bottom) do this margin: 20px auto;.
You don't need to use clear: both; necessarily. In a wrapper of a float (or multiple floats) you can just put overflow: hidden (same effect) and no additional markup is needed:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
overflow: hidden;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
</div>
If you didn't have the "overflow: hidden" in this example you wouldn't see the "#CCC" background color in the .container.
This is the same as doing clear way (but again above is better because less markup):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
Clear method is good in a case like this (when you want a child "outside of the parent"):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
But again, I wouldn't recommend that markup, if your design could be different you can use clear like this too:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
width: 200px;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
width: 240px;
}
.full
{
background: #f5f5f5;
clear: both;
margin: 20px auto;
text-align: center;
width: 90%;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="full">
this is full sized
</div>
</div>
If you follow these example, you should solve your problem :)
how do I position it at the center vertically?
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>
Use the vertical-align property.
div[class|=ui-grid] {
background: red;
text-align: center;
padding: 30px; }
div[class|=ui-block] {
background: blue;
font: 10px Verdana;
color: #fff;
padding: 10px;
vertical-align: middle;
display: inline-block; }
.ui-block-a { height: 100px; }
.ui-block-b { height: 50px; }
.ui-block-c { height: 200px; }
div[class|=ui-grid] and div[class|=ui-block] are using the attribute selector.
Preview: http://jsfiddle.net/Wexcode/LzuYR/