I'm currently working on a "mock-up" website for a class final and our teacher had us start it off on Dreamweaver. Worse experience ever.
I've managed to get so much done on it, I don't want to start over. However, I'm having trouble getting the text within a div to wrap around a image that's within another div.
The Professor did it. No idea how he did it.
Here is the index page and the CSS:
@charset "UTF-8";
body {
margin: 0px;
background-color: #FFF;
}
#wrapper {
height: 500px;
width: 1001px;
background-color: #666;
margin-right: auto;
margin-left: auto;
position: relative;
}
nav {
clear: both;
float: left;
height: 50px;
width: 1001px;
background-color: #FFFFFF;
color: #CC5072;
position: static;
text-align: center;
}
aside {
background-color: #FFFFFF;
float: left;
width: 330px;
height: 310px;
margin-top: 10px;
margin-left: 2px;
}
#column_l {
background-color: ;
float: left;
margin-top: 4px;
margin-left: 4px;
}
footer {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10px;
font-style: italic;
font-weight: lighter;
font-variant: normal;
color: #00CC00;
background-color: #666;
text-align: center;
width: 1001px;
float: left;
padding-top: 5px;
}
#column_r {
float: right;
height: 300px;
width: 300px;
position: static;
background-color: ;
margin-top: 4px;
margin-right: 2px;
color: #029900;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#content {
background-color: #FFFFFF;
float: right;
height: 310px;
width: 659px;
position: static;
margin-top: 10px;
margin-right: 2px;
}
#aside_content {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #090;
margin-right: 3px;
margin-left: 2px;
margin-top: 4px;
}
#aside_content hgroup {
padding: 0px;
}
nav li {
display: inline;
}
nav ul {
margin: 0px;
padding: 0px;
}
#nav_content {
padding: 10px;
word-spacing: .5em;
}
.scrollable {
height: 300px;
overflow-y: auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
</head>
<div id="wrapper">
<header>
<img src="Images/banner.jpg" width="1001" height="100" alt="banner">
<nav>
<div id="nav_content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
<li><a href="signingpage.html">Signing Page</a></li>
</ul>
<!--closing nav_content-->
</div>
</nav>
</header>
<aside>
<div id="aside_content">
<h2>Calander</h2>
<h3>November</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id lectus ac enim dignissim convallis. Nam arcu elit, tempor non molestie porttitor, malesuada in tellus. Curabitur nec adipiscing lacus. Quisque fermentum dolor eget ligula euismod, vitae
eleifend ante imperdiet. Vestibulum laoreet nunc eu vulputate tempus. Vivamus mollis enim mi, sed viverra mi placerat et. </p>
</div>
</aside>
<div id="content">
<div id="column_l">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
<section>
<article>
</article>
</section>
</div>
<div id="column_r">
Praesent nisl urna, aliquam sit amet rhoncus condimentum, faucibus sit amet metus. Donec pulvinar erat eget tellus mollis porta. Morbi sit amet lacinia libero. Sed mollis lectus sed mauris pretium commodo. Pellentesque feugiat, odio eu vulputate vulputate,
ante eros ornare sapien, non ullamcorper ante erat in sapien. Vivamus molestie auctor elementum. Nullam facilisis leo dolor, eget pretium diam eleifend nec. Morbi nec aliquam augue. Suspendisse nec turpis sed metus tristique molestie. Donec iaculis
placerat dignissim. yhjdsuligbkjrfhkbedsh</div>
</div>
<footer>
Sharisa Amanda Mohammed - November.11.2013
</footer>
</div>This would be the two divs
<div id="content">
<div id="column_l">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
<section>
<article>
</article>
</section>
</div>
<div id="column_r">
Praesent nisl urna, aliquam sit amet rhoncus condimentum,
</div>
</div>
And this the CSS related to it?
#column_l {
background-color: ;
float: left;
margin-top: 4px;
margin-left: 4px;
}
#column_r {
float: right;
height: 300px;
width: 300px;
position: static;
background-color: ;
margin-top: 4px;
margin-right: 2px;
color: #029900;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#content {
background-color: #FFFFFF;
float: right;
height: 310px;
width: 659px;
position: static;
margin-top: 10px;
margin-right: 2px;
}
Not sure if I did this right. Terribly new to this site. I was googling to answers and stumbled upon this.
Currently you have 2 different parent divs for the right-hand column, that is why the text doesn't wrap. What you need to do is put the image in the same div as the text, and then set float:left on the image, the text will just wrap automatically. You may also want to add a padding around the image so that the text doesn't go right up to the sides of it.
If you need the image to be in it's own div, just put that entire div(open and close tags) inside of the text div and it should have the same effect. Then just set float:left to the image div instead of the image itself.
Here's the one div solution:
HTML
<div id="column2">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
Praesent nisl urna, aliquam sit amet rhoncus condimentum
</div>
CSS
#column2 img {
float:left;
padding:5px;
}
And here's the two div solution:
HTML
<div id="column2">
<div class="left">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
</div>
Praesent nisl urna, aliquam sit amet rhoncus condimentum
</div>
CSS
.left {
float:left;
padding:5px;
}