Flexbox horizontal align has stopped working? - html

My horizontal align (justify-content: center) is not working on one of my sections. When I take the paragraph elements out everything seems to work fine, any help would be appreciated! Thank you.
Here is the code:
https://jsfiddle.net/vfo5urd4/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 30 Dec 2015 06:31:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>St Philips</title>
<link rel="stylesheet" type="text/css" href="stphilipscss.css">
<link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
<header>
<h4 id="textlogo">ST PHILIPS NERI</h4>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
<section id="section1">
<article>
<h1><i>I am the way,</i> the truth, and the life.</h1>
</article>
<button type="button">Come in</button>
</section>
<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
<section id="section2">
<article>
<h1>You're Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut posuere dui. Praesent nisl ante, dapibus eget dolor in, imperdiet pharetra tellus. Aliquam euismod hendrerit massa, sit amet interdum risus accumsan ac. In commodo varius felis, quis feugiat tellus tempor quis.</p>
<p>Donec gravida mauris lacinia, pellentesque nisl nec, vestibulum tellus. Maecenas non varius ligula. Ut sit amet leo quis orci porttitor posuere eget vel ex. Fusce sit amet purus ac eros venenatis efficitur nec eu tortor. </p>
</article>
</section>
</body>
</html>
body{
margin:0px;
/*overflow:hidden;*/
}
header{
display:flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
background-color:white;
border-bottom-width:1px;
border-color:#e5e5e5;
border-bottom-style:solid;
justify-content:space-between;
}
#textlogo{
margin:0px;
color:#191919;
font-family: open-sans, sans-serif;f;
font-weight:700;
display:inline-block;
margin-left:100px;
font-size:17px;
visibility:hidden;
}
nav{
margin-right:100px;
}
nav li{
display:inline;
padding:10px;
}
a{
color:#191919;
list-style-type:none;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size:15px;
}
#section1{
height:667px;
background- image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/2560x1440_cobble_ stones_zpsy5twolwx.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
#section1 article h1{
color:white;
font-size:63px;
font-family: 'open sans', serif;
font-weight:700;
margin-bottom:100px;
padding-top:150px;
margin-left:100px;
margin-right:100px;
}
button{
background-color:transparent;
color:white;
border-color:white;
border-style:solid;
font-size:25px;
border-width:1px;
font-family:'Open Sans';
font-weight:300;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
cursor:pointer;
}
#section2{
height:600px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
h1 i{
font-family: 'Playfair Display', serif;
}

My horizontal align (justify-content: center) is not working on one of my sections.
There are two sections in your code. I'll address both.
In #section1, the flex container has flex-direction: column. This means the main axis is vertical.
The justify-content property works along the main axis, so in this case you would use justify-content for vertical, not horizontal, alignment.
For horizontal alignment in column direction use align-items, align-content and align-self, which work along the cross-axis.
Learn more about main-axis / cross-axis and flex alignment properties here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In #section2, justify-content: center is working fine. The problem is the flex item occupies the full width of the container, so there's no larger space in which to center.
To see what I mean, give the flex item (article) a width: 50%: Revised Demo

Related

Fixed position interfering with scrolling on site

I am creating a website, but when i try to scroll, the page stays fixed. I can see the scroll bar moving up and down but the page isn't moving. I changed the screen height and width but it didn't change anything. The only way the page actually scrolls the way it is supposed to is when I change the different sections I have on my page from "fixed" position to relative. When I change it to relative though, the entire screen gets distorted and everything gets out of place. My code basically consists of different sections, which are all in the fixed position(I am sure that the position is the problem) and inside the sections, I have text and images(all fixed position). How do I fix this?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Home|Cloudberrie</title>
<style>
#top{
background-color:#E7E5DF;
height:3rem;
width:100%;
position:fixed;
top:0;
left:0;
z-index: -1;
}
#logo{
background-color:white;
height:3.5rem;
width:100%;
position:fixed;
z-index:-1;
top:48px;
left:0;
}
#banner{
background-color:white;
height:7rem;
width:100%;
position:fixed;
z-index:-1;
top:100px;
left:0;
}
.button{
border:none;
background-color:#1f88ca;
padding: 20px 40px;
font-size: 16px;
cursor: pointer;
display: inline-block;
border-radius:18px;
width:200px;
position:fixed;
top:400px;
left:100px;
color:white;
letter-spacing: 3px;
}
button:hover{
background-color:red;
}
#choose{
background-color:white;
height:30rem;
width:100%;
position:fixed;
z-index:-1;
top:550px;
left:0;
}
html {
height: 100%;
width: 100%;
overflow:auto;
padding-bottom:2000px;
}
</style>
</head>
<body >
<section id ="top">
<p style="position:fixed; right:1800px;bottom:880px;"><i class="fa fa-location-arrow" aria-hidden="true"></i> Plano, Texas</p>
<p style="position:fixed; right:1650px;bottom:880px;"><i class="fa fa-phone" aria-hidden="true"></i> (123) 456 7890</p>
<p style="position:fixed; right:1460px;bottom:880px;"><i class="fa fa-envelope" aria-hidden="true"></i> support#gmail.com</p>
</section>
<section id="logo">
<img src="berrylogo.png"height="25"width="25" style="position:fixed;left:10px;top:56px;">
<img src="cloudberie.png"height="30"width="150" style="position:fixed;left:40px;top:56px;">
<p style="position:fixed; right:350px;top:65px;">Home</p>
<p style="position:fixed; right:275px;top:65px;">About</p>
<p style="position:fixed; right:180px;top:65px;">Services</p>
<p style="position:fixed; right:110px;top:65px;">Client</p>
</section>
<section id ="banner">
<img src="banner-3.png"width="100%" height="450px">
<h1 style="font-family:sans-serif;color:#1f88ca;position:fixed; top:180px;left:100px;">MAIN TEXT</h1>
<p style="font-family:sans-serif;color:grey;position:fixed; top:250px;left:100px; font-size:40px;">Lorem ipsum dolor sit amet, consectetur </p><br><p style="font-family:sans-serif;color:grey;position:fixed; top:290px;left:100px; font-size:40px;">adipiscing elit, sed do eiusmod tempor.</p>
<button class="button">Learn More</button>
</section>
<section id="choose">
<p style="font-size:2.5rem;color:#5e5e5e;position:fixed;top:630px;text-align:center;left:760px;"> <b>WHY CHOOSE US</b></p>
<div style="width:80px;height:3px;border:1px; background-color:#25ace4;position:fixed;top:700px;left:890px;"></div>
<img src="why-us-pic.jpg"width="300px;"style="position:fixed;top:800px;left:425px;">
<p style="font-size:1rem;position:fixed;top:800px;left:800px;">At consectetur lorem donec massa sapien faucibus et molestie ac. Molestie ac feugiat sed lectus vestibulum. Faucibus pulvinar elementum integer enim. Eu consequat ac felis donec et odio. Ac ut consequat semper viverra nam libero justo laoreet sit. Condimentum vitae sapien pellentesque habitant morbi.</p>
</section>
</body>
</html>
Fixed elements do not move on page scroll. That is why they were made. So to fix it, do not set position to fixed. Here is position:fixed defined by MDN:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
Here is an example of position:fixed:
for(let i=0;i<100;i++){
document.body.innerHTML+="<p>normal positioning</p>"
}
#fixed{
position:fixed;
}
<!DOCTYPE html>
<html>
<body>
<p id="fixed">fixed text</p>
</body>
</html>
Given the small amount of detail I have, I think what you are looking for is absolute instead of fixed. That being said, manual positioning of elements is generally not good practice. If this doesn't work try adding more information like code snippets and screenshots

how to align div containing text and image to center

I want to do following:
A div containing an image 50x50 and text next to it of font 25px.
Image and text should align in middle.
The div containing image and text should align to center of it parent.
I tried the followint but it does not give the desired result.
What needs to be done?
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
<html>
<head>
<style>
img {
float: center;
}
</style>
</head>
<body>
<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50">
Lorem .</p>
</body>
</html>
Try this:
<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50">
Lorem .</p>
p img{
display:inline-block;
vertical-align:middle;
margin-right:5px;
}
Here is jsfiddle link: https://jsfiddle.net/x376p83x/
You can do this with flexbox:
.parent {
height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightgrey;
}
p {
font-size: 25px;
}
<div class="parent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1EcWaTLIwhn69VJFubIdi4cpn2MYbkYN8hvMk00abhBHoO5fTnjdTgLY" alt="W3Schools.com" width="50" height="50">
</div>
please check this plunker
https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Centered Div</h1>
<div class="parent-div">
<div class="child-div">
<span class="my-text">Iam Centered centerd text very long Iam Centered centerd text very long</span>
<img src="test.svg" style="width:50px; height:50px;"/>
</div>
</div>
</body>
</html>
and CSS
/* Styles go here */
.parent-div{
background:green;
padding:10px;
}
.child-div{
display:table;
margin:0 auto;
text-align:center;
color:white;
}
.my-text{
max-width:200px;
display:inline-block;
}
Generally speaking, you would use text-align: center on the parent container.
http://www.w3schools.com/cssref/pr_text_text-align.asp
You can also achieve this using margins, i.e. margin: 0 auto
where '0' is your vertical margins, and 'auto' calculates the horizontal margins automatically - thus positioning your element in the centre.
For your use case, I'd suggest text-align.
try this
html
<p class="cetner"><img src="http://www.planwallpaper.com/static/images/butterfly-hq-wallpaper_09354994_256.jpg" alt="image" width="50" height="50">
Lorem .</p>
css
p.cetner {
width: 100px;
height: 50px;
text-align: center;
}
img {
display:inline-block;
vertical-align:middle;
}

margin-top moving along with the #section div?

I'm trying to move the class .column below 50px, but margin-top: 50px moving along with the #section. Why is that and how it can be fixed?
*{ padding:0; margin:0; }
body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; }
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
You can apply padding-top: 50px to #section rather than margin-top to .column
Referring from Mozilla Documentation:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Read about Margin Collapsing for more details.
*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }
span{ font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
If you want to use margin-top then give display:block to parent div and display:inline-block to child div.
See here
Fore more info read here
Edited CSS
*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White;display:block; }
span{ font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px;display:inline-block;}
You should use padding-top for #section like in the fiddle and remove margin-top from child. Since margins will collapse to each other, it's better not to use it for positioning elements. refer this: Margin goes outside div when border is removed
#section {
padding-top: 40px;
...
}
Another approach is use the same code but add overflow:auto to #section like this:
#section {
overflow:auto;
...
}
There's another solutions too like using border on parent, but these are more like hacks since we used margins for positioning.
*{ padding:0; margin:0; }
body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; padding-top:50px;}
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; }
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>

Parent Div not wrapping around its child divs - Missing clearFloat may be the issue

I'm having a small issue with one of my divs the #divSidebar not wrapping around it's child divs. It's probably something small that I probably overlooked, but I've been fussing with it for quite sometime. I believe it has something to do with a missing . I can get the content over to the side, but I had to add a innerSideBar div that was floated to the right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Welcome to TutorialHelp!</title>
<link href="css/tutorialHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="divHeaderContainer">
<div id="divHeader">
<div id="divLogo"></div>
<div id="divNavigtation">
<div id="divNavMenu">
<ul>
<li> Home</li>
<li> Tutorials
<ul>
<li>Photoshop
<li>Dreamweaver
<li>Illustrator
<li>Flash
<li>InDesign
</ul>
</li>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div>
<div id="divSocial"></div>
</div>
</div>
</div>
<div id="divContentContainer">
<div id="divWrapper">
<div id="divInnerWrapper">
<div id="divContent">
<div id="divBanner"></div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="The Basics Of Photoshop">
<img width="200px" height="200px" src="images/photoshopBasicsImage.jpg" alt="PhotoshopBasicsImage" title="PhotoshopBasicsImage" />
</a>
<span class="metaWrapper">Photoshop</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Photoshop
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>The Basics Of Photoshop</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Building A Basic Web Page In Dreamweaver">
<img width="200px" height="200px" src="images/dreamweaverBasicWebPageImage.jpg" alt="DreamweaverBasicWebPageImage" title="DreamweaverBasicWebPageImage" />
</a>
<span class="metaWrapper">Dreamweaver</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Dreamweaver
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>Building A Basic Web Page In Dreamweaver</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Designing A Cartoon Environment">
<img width="200px" height="200px" src="images/flashCartoonEnvironmentImage.png" alt="FlashCartoonEnvironmentImage" title="FlashCartoonEnvironmentImage" />
</a>
<span class="metaWrapper">Flash</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Flash
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>Designing A Cartoon Environment</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divBottomBanner"></div>
</div>
<div id="divSidebar">
<div id="divInnerSideBar">
<div id="divAdWrapper">
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<br class="clearFloat" />
</div>
<fb:comments href="http://www.facebook.com/pages/Tutorialhelp/497024140318879"
num_posts="4" width="300"></fb:comments>
<fb:like href="http://www.facebook.com/pages/Tutorialhelp/497024140318879" send="true" width="285" show_faces="true" font="verdana"></fb:like>
<div class="clearFloat"></div>
</div>
</div>
<div class="clearFloat"></div>
</div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
min-width:1300px;
background-color:#83ACBC;
}
#divHeaderContainer{
width:100%;
height:200px;
background-color:#CEDBD9;
margin:0px auto;
}
#divHeader{
width:1120px;
height:200px;
min-width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r1_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divLogo{
height:130px;
}
#divNavigation{
height:32px;
position:relative;
background-color:#333;
width:1120px;
}
#divNavMenu {
width:auto;
height:32px;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#divNavMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#divNavMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#DCE4E3;
}
#divNavMenu ul li a {
text-align:center;
height:30px;
width:148px;
display:block;
color:#000;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
border:1px solid #C5D1D0;
font-size: 16px;
font-weight: bold;
}
#divNavMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#divNavMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
#divNavMenu li:hover {
background:#83ACBC;
}
#divNavMenu ul li:hover ul li a:hover {
color:#FFF;
background:#9EBECB;
}
#divNavMenu a:hover {
color:#FFF;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
height:0px;
overflow:hidden;
}
/* IE7 Display Fix */
#divNavMenu ul li {
display: inline;
}
#divContentContainer{
margin:0px auto;
padding-bottom:50px;
width:100%;
background-image: url(../images/backgroundImage_r1_c1_r3_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divWrapper{
width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r2_c1.jpg);
background-repeat: repeat-y;
background-position: center;
}
#divInnerWrapper{
margin:0px auto;
width:1088px;
}
#divContent{
width:738px;
float:left;
margin:0px auto;
}
#divBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
background-color:#D3DCDA;
}
#divListing{
padding:20px 20px 0px 18px;
margin:15px 0px 0px 0px;
}
.listing{
height:auto;
background:none;
border-bottom:solid 1px #B7B7B7;
}
#divListingLeft{
width:200px;
float:left;
margin:0px 0px 20px 0px;
}
#divListingRight{
width:480px;
float:right;
}
.metaWrapper{
font-family:Verdana, Geneva, sans-serif;
display:block;
width:200px;
font-size:14px;
text-align:center;
font-weight:bold;
color:#000;
}
.tags{
font-style:italic;
}
.date{
font-style:italic;
}
#divContent #divListing p{
padding:0 20px 0px 10px;
}
#divContent #divListing h1{
font-size:26px;
color:#000;
padding:0px 20px 0px 10px;
margin:0px;
}
h1 a{
font-style:normal;
text-decoration:none;
color:#000;
}
#divBottomBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
margin-top:35px;
background-color:#D3DCDA;
}
h2{
font-weight:bold;
font-size:24px;
margin:30px 0px 0px 20px;
padding-bottom:5px;
border-bottom:solid 1px #B7B7B7;
}
#contactForm{
padding:0px;
display: block;
height: auto;
margin-top: 30px;
margin-right: 160px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
}
#divSidebar{
}
#divInnerSideBar{
width:300px;
float:right;
}
#divAdWrapper{
width:260px;
height:auto;
}
.adListing{
display:block;
font-size:11px;
background-color:#D3DCDA;
color:#000;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
width:125px;
height:125px;
margin: 0px 4px 4px 0px;
}
I've added both html and css code and hopefully that will help you see where the problem is in the code. Any other problems with the code can be brought up, but looking for a solution to the #divSidebar and its child content.
Define your divSidebar
#divSidebar{
float:right;
}
demo

How do I correctly position a div at the bottom of the screen?

I would like to position a div at the bottom of the page in the left cell if the content in the right cell grows. How can I do this?
The div is located between #cell-right and menu item 1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
html, body {
width:100%;
background:#6f711a;
border:0px solid red;
margin:0;
padding:0;
font-family:Arial;
}
#wrapper {
width:1220px;
padding:0;
margin:10px auto;
background:#ccc;
border:3px solid white;
}
#content {
background:#444;
float:left;
width:100%;
min-height:620px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#444;
float:left;
width:195px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1025px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
background-color:#000;
color:#fff;
clear:both;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:0px solid;
}
#cell-right #content-right{
padding:10px 10px 0 10px;
}
#cell-left #content-left{
padding:0;
margin:0;
}
#content-left {
position:relative;
height:100%
}
#content-right {
background:#f1f1f1;
}
#content-left ul li a {
border-bottom: 1px solid #fff;
color: white;
display: block;
overflow: auto;
padding: 10px;
text-decoration: none;
}
ul {
border: 0 none;
font: bold 13px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="cell-left">
<div id="content-left">
<ul>
<li>menu item 1</li>
</ul>
<div style="vertical-align:bottom;height:100%;">vertically align on bottom</div> This is the div that needs to rest on the bottom
</div>
</div>
<div id="cell-right">
<div id="content-right">
Lorem ipsum dolor sit amet consectetuer eget at enim ac eget.
Tellus nibh non ut congue montes parturient natoque odio at ipsum.
Id aliquet ante arcu feugiat Lorem dis ut libero laoreet dui.
Id tincidunt elit Nulla ut elit Nulla dui ullamcorper magnis ipsum.
Turpis Donec risus Proin tristique egestas hendrerit Vestibulum sed ut orci.
Pede adipiscing a et magna ultrices ipsum Aenean a ut laoreet.
Sed vitae vitae eu nibh pellentesque quis orci vitae at Aenean.
.. lots more of text here ..
</div>
</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
Use the same css you have now. Just change body like this:
<body>
<div id="wrapper">
<div id="content">
<div id="cell-left">
<div id="content-left">
<ul>
<li>menu item 1</li>
</ul>
</div>
</div>
<div id="cell-right">
<div id="content-right" style="position:relative">
Lorem ipsum dolor ... bla bla bla
<div style="position:absolute; left:-185px; bottom:10px; width:180px">This is the div that needs to rest on the bottom vertically align on bottom</div>
</div>
</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
Actually I've changed just these lines:
<div id="content-right" style="position:relative">
Lorem ipsum dolor ... bla bla bla
<div style="position:absolute; left:-185px; bottom:10px; width:180px">This is the div that needs to rest on the bottom vertically align on bottom</div>
</div>
Give the div you want on the bottom a style="position:absolute; bottom:0" and the parent div (in this case the "content-left") a style="position:relative;"