I've got a very basic page that looks like this :
JSFiddle - DEMO
Currently the image is centred on the wrapper 'Blue' DIV. This 'blue' DIV is centred on the page and needs to remain so.
What I'd like is to be able to have the 1st image aligned with the left edge of the DIV highlighted in Blue and then be able to put an image aligned to the right edge of the same Blue DIV.
I found a post on here that used this code :
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
But that just seems to line up with the main container DIV, not the Blue DIV..
How can I do this properly ?
Thanks :)
Something like this?
(or alternatively)
HTML
<body>
<div id="holder">
<div id="logo" class='left'>
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div class='right'>
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div style='clear:both;'></div>
<div id="wrapper"></div>
</div>
</body>
CSS
html, body {
height: 100%;
text-align:center;
margin: 0px;
padding: 0px;
background: #fff;
font-family:'Open Sans', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #fff;
}
#holder {
margin :0 auto;
display:inline-block;
width: 850px;
}
.left {
float:left;
}
.right {
float:right;
}
#logo {
align:middle;
text-align:center
}
#wrapper {
height:200px;
position: relative;
padding: 0em 0em 0em 0em;
background: #fff;
border: 1px solid blue;
}
Related
What seemed to be a simple task turned out to be quite a problem. I am trying to find a way to both preserve the vertical alignment of green DIVs and to prevent the absolute positioned DIV from overlapping the contents that follows.
Since I had to use absolute positioning not to destroy the alignment, I am now looking for a solution to another problem that showed up as a consequence.
Here is the code:
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
position: relative;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
clear: both;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_container {
position: absolute;
left: 0;
right: 0;
}
.below_gauge2 {
width: 240px;
color: blue;
position: relative;
margin: auto;
}
.below_gauge3 {
width: 240px;
color: blue;
position: relative;
margin: auto;
border: thin solid #F00;
}
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_container">
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one. That has been solved.</div>
<div class="below_gauge3">I do not want the contents of this DIV to overlap the contents below. This DIV can contain any ammount of text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</div>
</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Is there a way to make the DIV with the red border to push down this DIV so the DIV with the red border would not overlap what is below?
</div>
</div>
</div>
I made this code based on the answer (that I accepted) to my question when I had problems with how to allign two green DIVs. As can be seen the solution was to use absolute positioning but now that caused a problem because every absolute positioned element is according to CSS specification removed from the flow.
Try once Left-margin and right-margin.
I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*#import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
<div id="header">
<p>This is the header.</p>
</div>
<div class="wpr">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
<div id="contentliquid">
<p>Some content</p>
</div>
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
CSS
#header {
height: 100px;
background: orange;
}
.wpr
{
display:table;
}
#leftcolumn
{
width: 200px;
background: aqua;
display:table-cell;
}
#rightcolumn
{
width: 200px;
background: pink;
display:table-cell;
}
#contentliquid {
background: yellow;
overflow:hidden;
display:table-cell;
}
#footer
{
clear:both;
background: green;
}
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
On image you can see 3 pictures, i want them to be hovered with text.
I'm pretty new in all of this CSS thingies. After you hover on 1 of three image text will appear, my problem is that i tried many thing, maybefault lays in position absolute?
HTML:
<div id="imgBackground"></div>
<div id="imgContainer">
<img src="images/coffee_01.jpg" />
<img src="images/coffee_02.jpg" />
<img src="images/coffee_03.jpg" />
</div>
CSS:
#imgBackground {
position: absolute;
width: 100%;
height: 300px;
background-color: rgb(244,244,244); }
#imgContainer {
position: relative;
margin: auto;
width: 980px;
padding: 30px; }
#imgContainer img {
margin: 0px 14px 0px 14px;
width: 295px;
height: 254px; }
Thanks guys but your answers haven't helped me much.
As you see in this code i tried to scretch a bit what i need, but take attention and move your mouse under the imgage on white space, it also hovering. How to fix this problem?
#wrapper .text {
position:relative;
bottom:221px;
left:0px;
width: 300px;
height: 200px;
background: rgba(0,0,0, .4);
text-align: center;
text-height: 50px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
Here's my update:
http://jsfiddle.net/D5UEW/2/
I think this might cause it, any ideas ?
#edit
This code from my page:
.imgContainer {
position: relative;
margin: auto;
width: 295px;
height: 254px;
padding: 30px;
float: left;
}
.imgWrapper .text {
position:relative;
bottom:274px;
top: 10px;
width: 295px;
height: 254px;
background: rgba(0,0,0, .4);
text-align: center;
visibility:hidden;
}
.imgWrapper:hover .text {
visibility:visible;
}
And result on my page:
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
check demo here : http://jsfiddle.net/liccyfuentes/D5UEW/
LOne's answer is correct, but this works without you changing to much.
HTML:
<div id="imgContainer">
<li style="background-image:url('images/coffee_01.jpg')"><p>Some random text here...<p></li>
<li style="background-image:url('images/coffee_02.jpg')"><p>Some random text here...<p></li>
<li style="background-image:url('images/coffee_03.jpg')"><p>Some random text here...<p></li>
</div>
CSS:
#imgContainer {
position: relative;
margin: auto;
width: 980px;
color:#FFF;
padding: 30px;
}
#imgContainer li {
margin: 0px 14px 0px 14px;
width: 295px;
height: 254px;
list-style:none;
background:#000;
}
#imgContainer li * {
opacity:0; /* Visibility: hidden; works too! */
}
#imgContainer li:hover * {
opacity:1; /* Visibility: visible; works too! */
}
Codepen: http://codepen.io/anon/pen/bzIGl
I'm trying to get a layout to look like this following:
http://i42.tinypic.com/2i8wyrk.png
I've managed to get the "content" div aligned fine with the header div, but I'm not sure how to put the nav div in there and keep it aligned properly. This is what I have so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style>
div#container {
position: relative;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 70%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
}
div#nav {
position: absolute;
background-color: #900;
border: 2px solid #488ed0;
width: 150px;
height: 200px;
float: left;
}
div#content {
border: 2px solid #488ed0;
background-color: #900;
width: 70%;
height: 900px;
margin: 0 auto;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id = "container">
<div id="header">
<center><img src = "images/logo.png" /></center>
</div>
<br />
<div id="nav">
<center><br />
<a href='#'>Index</a><br />
<a href='#'>About</a><br />
<a href='#'>Contact</a>
</center>
</div>
<div id="content"></div>
</div>
</body>
</html>
How can I align the nav div as it is in the example mockup I made? I want to make sure the left side of 'nav' stays aligned with the header, and the right side of 'content' stays aligned with the right side of the header.
For nav I noticed that you are using position: absolute and a float: left;. While aligning might need a bit of tweaking the best solution I can think of is using float for both the nav and content. For example:
#header{
margin: 0 auto;
width: 800px;
height: 200px;
}
#container{
margin: 0 auto;
width: 800px;
height: auto;
}
#nav{
float: left;
width: 200px;
height: auto;
}
#content{
float: right;
width: 600px;
height: 500px;
}
.clear{
clear: both;
}
Of course adjust the widths, height and margins according to the spacing you would like.
<div id="header">This is my banner</div>
<div id="container">
<div id="nav">This is my navigation menu</div>
<div id="content">This is my content</div>
</div>
<div class="clear">
If you want to make sure that things stay aligned when adding a margin to the nav section use margin-right and if you want to add a margin to the content section use margin-left. Finally, if you need a space between the banner and the two section below it use margin-bottom inside the header CSS.
Here is a solution if you're looking for a liquid layout: http://jsfiddle.net/M78q4/1/
HTML
<div id="head">this</div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
div#container {
position: relative;
width: 75%;
margin: 0 auto;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 100%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div#nav {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
background-color: #900;
border: 2px solid #488ed0;
width: 24%;
height: 200px;
float: left;
margin-right: 2%;
}
div#content {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border: 2px solid #488ed0;
background-color: #900;
width: 74%;
height: 900px;
float: left;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
If you don't want it to be liquid just change the #container width to a fixed width like 800px. Adjust the margins as needed.
This should get the layout you're after: http://jsfiddle.net/WDvwP/
HTML
<div id="head"></div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
#head{
width:900px; height:100px;
background:#f00;
margin:10px auto;
}
#container{
width:900px; margin:0 auto;
}
#nav{
display:inline-block;
width:250px; height:300px;
background:#0f0;
}
#content{
display:inline-block;
width:600px; height:300px;
background:#00f;
margin:0 0 0 50px;
}
I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.