Been having issues trying to get my floated elements to extend with all of my content. I've done some research but I have become officially stumped/exhausted. I've attempted a few clearfix resolutions, standard, micro, and inline, essentially everything listed in this post.
My theories:
Something wrong with my syntax, or I'm not placing the <div> in the correct place.
I'm handling the content, or posts, in a fashion that will not allow me to extend the wrapper.
I'm an extremely special window licker.
My Code
Stylesheet:
/*------------------------Wrapper------------------------*/
html, body, #wrapper, .bar, .line, .content{
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
width: 100%;
overflow: auto;
}
.bar{
float: left;
width: 5%;
}
.line{
float: left;
width: 1%;
}
.content{
float:left;
width:88%;
}
.white{
background-color: #FFFFFF;
}
.red{
background-color: #A80000;
}
.black{
background-color: #000000;
background-image:url('http://i.imgur.com/bcq2U.png');
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
/*------------------------Navigation------------------------*/
#nav{
width: 100%;
float: left;
background-color: #A80000;
border-bottom: 1px solid #C4A23E;
}
ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
font-family: "Arial";
}
li{
float: left;
}
li a{
display: block;
padding: 8px 15px;
text-decoration: none;
color: #000000;
background-color:#A80000;
border-right: 1px solid #C4A23E; }
li a:hover{
color: #A80000;
background-color: #C4A23E;
}
/*------------------------Text------------------------*/
h1 {
color: #FFFFFF;
font-family: "Arial";
text-alighn:center;
}
/*------------------------Boxes------------------------*/
.post{
float:left;
display:inline;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position: top left;
background-color:white;
width:60%;
margin:0px auto;
text-align:left;
padding:2px 5px 2px 5px;
margin:1cm 0cm 1cm 1cm;
}
.logbox{
float:left;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position:top left;
background-color:white;
margin:0px auto;
text-align:center;
padding:80px 80px 80px 80px;
margin:1cm 0cm 1cm 1cm;
}
/*------------------------ClearfixA------------------------*/
/*
.clearfix:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
.clearfix{
display:inline-block;
}
html[xmlns].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
*/
/*------------------------ClearfixB------------------------*/
.cf:before,
.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom: 1;
}
Webpage:
<? include "config.php";
include_once "markdown.php";
$my_html = Markdown($my_text);
?>
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<?session_start();
if (!isset($_SESSION['username'])){?>
<ul>
<li>Sign In</li>
<li>Home</li>
</ul>
<?}
else{
?>
<ul>
<li>Home</li>
<li>Admin Panel</li>
<li>Sign Out</li>
</ul>
<?}
?>
</div>
<!-- Entries Start -->
<?$query= "SELECT *
FROM entries
ORDER BY submitted DESC";
$result= mysql_query($query);
$num = mysql_numrows($result);
?>
<?$i=0;
while ($i < $num){
$submit = mysql_result($result, $i, "submitted");
$title = mysql_result($result, $i, "title");
$content = mysql_result($result, $i, "content");
$userid = mysql_result($result, $i, "userid");
$id = mysql_result($result, $i, "id");
?>
<?$q = "SELECT username
FROM users
WHERE $userid = uid";
$r = mysql_query($q);
$username = mysql_result($r, 0, "username");
?>
<span class="post">
<h3><?=$title?></h3>
<?=$submit?><br/>
<?=$username?>
<p><?=$content?></p><br/>
<?$que = "SELECT t.tag
FROM tags AS t
INNER JOIN idx AS i ON t.tagid = i.tid
INNER JOIN entries AS e ON i.eid = e.id
WHERE e.id = '$id'";
$res = mysql_query($que);
$n = mysql_numrows($res);
$x=0;
?>
Tags:
<?while ($x < $n){
$tag = mysql_result ($res, $x, "tag");
$tid = mysql_result ($res, $x, "tid");
?>
<a href = "tag.php?tid=<?=$tag?>">
<?=$tag?></a>,
<?$x++;
}
?>
</span>
<?$i++;
}
?>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
Here is an image of what I am seeing on Chrome:
Any solutions, ideas, resources, help, advice would be greatly appreciated.
Also, I've read that FLOAT templates will be obsolete at some point in time and/or aren't the best way to design a webpage. Any suggestions or resources on how to do it otherwise would also be a welcomed response.
EDIT 4/24/13
Adding the code I receive after viewing the page source.
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<ul>
<li>Sign In</li>
<li>Home</li>
</ul>
</div>
<!-- Entries Start -->
<div class="post">
<h3>Lorem Ipsum Contd</h3>
2013-04-22 16:01:31<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
<a href = "tag.php?tid=Lorem Ipsum">
Lorem Ipsum</a>,
</div>
<div class="post">
<h3>Lorem Ipsum</h3>
2013-04-22 00:12:40<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
</div>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
Also a JS Bin replication.
In .content within your css, add overflow: auto; . This will wrap your div around your content automatically.
Related
I got a city landing page, below the main image I want to have one picture with float: right; and next to that is text. Below that, I want to have the same content but this time I used float: left; but the picture didn't position itself below the first one. They are in separate DIV-s with display: block;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main-style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<title>Moskva</title>
</head>
<body>
<!-- Header start -->
<header>
<div class="container">
<h1>Moskva</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique.</p>
</div>
<div class="container">
<nav>
<ul>
<li>Naslovnica</li>
<li>Galerija</li>
</ul>
</nav>
</div>
</header>
<!-- Header end -->
<!-- About city -->
<section id="opis">
<div class="container">
<div class="box">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique. Fusce eget quam sit amet dui consequat fermentum. Morbi dictum efficitur lorem a aliquam. Nam dapibus, lorem vel molestie tincidunt, urna ipsum vehicula sem, in vehicula dolor dui vel massa. Fusce a tortor est. Maecenas nec congue diam. Ut et ornare urna, id feugiat ex.Donec ac vehicula dolor, quis placerat arcu. Nam laoreet enim in varius tristique. Vestibulum feugiat sed nisl ac vestibulum. Cras quis pellentesque quam, eu sollicitudin enim. Curabitur massa elit, tempor vel leo in, laoreet placerat sem.
</p>
</div>
<hr>
<!-- Image-Text sections -->
<!-- Kremlin -->
<div class="box">
<h3>Kremlin</h3>
<img src="../images/kremlin-pic.jpg" alt="kremlin" class="right-img">
<br> <br>
<p>Najprepoznatljivija struktura Moskve bez sumnje je Kremlj, utvrđeni kompleks iz 15. stoljeća koji pokriva površinu od 275.000 četvornih metara okružen zidinama izgrađenim 1400-ih. Palača Grand Kremlj - koja ima preko 700 soba - nekad je bila obitelj kralja i sada je službeno prebivalište predsjednika Ruske Federacije, iako većina šefova država odlučuje prebivati negdje drugdje.</p>
</div>
<!-- Kremlin End -->
<!-- Bolshoi Theatre Start -->
<div class="box">
<h3>Bolshoi Theatre</h3>
<img src="../images/bolshoi-theatre.jpg" class="left-img">
</div>
<!-- Bolshoi Theatre End -->
</section>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
background-color: #f4f4f4;
}
/* Global container */
.container {
width: 80%;
margin: auto;
overflow: hidden;
text-align: center;
}
.box {
text-align: center;
display: block;
}
/* Header section */
header {
text-align: center;
padding-top: 30px;
background: url(../images/background.jpg) no-repeat;
min-height: 690px;
}
header h1 {
font-size: 95px;
font-weight: bold;
color: white;
font-family: 'Dancing Script', cursive;
}
header p {
color: white;
}
nav {
margin-top: 4%;
}
/* Anchor tags section */
header a {
color: white;
text-decoration: none;
font-size: 24px;
transition: linear .2s;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Anchor tags section end */
header li {
display: inline;
padding: 0px 40px 0px 20px;
}
/* Header section END */
/* Image-Text section */
h3 {
font-size: 28px;
font-family: 'Dancing Script', cursive;
}
/* Image float - RL */
.right-img {
float: right;
}
.left-img {
float: left;
}
First of all when you are using float so you need to add overflow hidden in Parent.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
So you have to add overflow: hidden; CSS, please review below as I create an example for the same.
I add a link in comment for better understanding.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}
I currently have a site I'm working on ( copying another site as Practice )
This is the site I am trying to re-create
http://www.north2.net/
.
I am almost done, however I cannot position the two side sections(left and right of main image) correctly.
Can anyone help me out?
I have 3 "sections" left, middle, right, all are in a wrapper
I've tried
margin-top,
removing inline-block on the wrappers
...
MY GOAL :
Is to be able to raise the two side bars to my liking, but I don't see how to raise them in any way.
north2.net to see what I mean.
JSFIDDLE
http://jsfiddle.net/abXk4/
Not Important ::
Also, when I position anything, my background image moves and there is a white gap on the bottom of the page, my screen is 1920 x 1080, so any adjustment makes a white space,
I've been fixing this with
padding-bottom: X%;
Is this just something I have to do? Or is it because I coded incorrectly.
HTML
<title> ENTER TITLE </title>
</head>
<body>
<div id='page'>
<!--All of Left Side Bar Contents -->
<div class="swrap">
<div id="logo">
<img src="img/logo_green.png">
</div>
<div id="about">
<aside class="tlb"><p>About Us</p></aside>
<p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
<div id="services">
<aside class="tlb"><p>Services</p></aside>
<ul>
<li>Web Site Dev and Applications </li>
<div class='hr'></div>
<li>CMS</li>
<div class='hr'></div>
<li>Digital Branding and Industry</li>
<div class='hr'></div>
<li>UI Design</li>
<div class='hr'></div>
<li>Social Media</li>
<div class='hr'></div>
<li>User Experience</li>
<div class='hr'></div>
<li>Creative Ingenuity</li>
</ul> </div>
</div>
<!-- Center Content ( main header, main image ) -->
<div class="mwrap">
<!-- Main Nav Above Slider -->
<nav class='mnav'>
<ul>
<li class="m1"><a href='#'>home</a></li>
<li class="m2"><a href='#'>Author</a></li>
<li class="m3"><a href='#'>work</a></li>
<li class="m4"><a href='#'>clients</a></li>
<li class="m5"><a href='#'>contact</a></li>
</ul>
</nav>
<div id="fimg">
<img src="img/fumic_naslovna.jpg">
</div>
<div id="featart">
<article>
<h1>Lorem Ipsum</h1>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
</article>
</div>
</div>
<div id="rwrap">
<div class="rfc">
<aside class="tlb">Featured Clients</aside>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
<div class='hr'></div>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(img/brown.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
font-weight: bold;
font-size: large;
text-align: left;
}
* {
border-radius: 1px;
}
#page {
margin: 30px 25%;
width: auto;
/* width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;
}
/*Left Content Begins ------------------ */
.swrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
margin-top: 100px;
}
#logo {
background-color: rgba(0,0,0,.7);
}
#about {
margin: 3px 0;
background-color: rgba(89, 194, 141, 1);
padding: 5%;
}
#about aside {
margin-left: -6% !important;
}
#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
margin: 3px 0;
}
.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}
/*Middle Content Begins ------------------ */
.mwrap {
width: 48%;
margin: 0 auto;
/*1% margin on each side for .mwrap*/
display:inline-block;
}
.mnav ul {
list-style:none;
}
.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;
}
.mnav ul li a {
text-decoration: none;
color: #fff;
}
.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }
.mnav ul li:active {
background-color:none !important;
}
.mnav li:hover {
background-color: rgba(0,0,0,.3);
}
#fimg {
width: 100%;
}
#fimg img {
width: 100%;
}
#featart {
margin-top: -10px;
background-color: rgba(64, 164, 90, .9);
padding: 1% 1%;
}
/*Right Content Begins ------------------ */
#rwrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
}
.rfc {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
}
.rfc .tlb {
margin-top: 9px !important;
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
The easy way is to use position relative position: relative; bottom: [how ever many pixels]
A better (and later much more flexible) way is to change you HTML structure a little bit.
If I were building this site I'd break it into two wrapping divs with three column divs under each of them like here:
<div class="header">
<div class="left-column">
<img id="logo" src="img/logo.png" />
</div>
<div class="middle-column">
<ul class="nav"></ul>
</div>
<div class="right-column">
Put content here if you want it
</div>
</div>
<div class="content">
<div class="left-column">
Content in left column
</div>
<div class="middle-column">
Content in middle
</div>
<div class="right-column">
Content on right
</div>
</div>
Now, use CSS to float those columns just like you did before. The difference with this is you can define a height for the header and the logo and navigation will be much easier to align as they are separate from the other columns.
If you want to get more technical check out CSS Flexbox, it would work well here.
http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
set
a position: relative;
bottom: X px;
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
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;"