Floating an image to the left and two paragraphs to the right

music_fan01 · October 4, 2011

I have the outcome, but I think I may have used too many divs. as well as inline styling and in doing so I've had to adjust image. I am trying to get my image also at a width of 370px and a height of 226px.

In short, I trying to get an image floated to the left and two paragraphs to the right. How can I clean up my code a little better?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


<!-- header -->
    <div id="header">
    	<div id="logo"><a href="#">Header</a></div>
        <div id="menu">
        	<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">contact</a></li>
    <li><a href="#">Guestbook</a></li>
            
                  </ul>

   <img src="images/twitter.png" height="49px;"/>
  
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Welcome</strong></h1>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<div style="float: left;">
<img src="images/test.jpg" width="304px;" height="285px;"/></div>


<div style="float: right; width: 220px; margin-right: 5px;">
<h2>Header</h2>
  <p>
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>



<div style="float: right; width: 20px; margin-right: 6px;">
<img src="images/div103.gif" height="200px;"/></div>

<div style="float: right; width: 220px; margin-right:5px;">
<h2>Header</h2>
  <p>
    This is our left text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>

<div style="clear: both;"> </div>	


<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
          </div>
           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>


/* body */

body {
margin:114px 0 0 0; 
line-height:16px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 
margin-bottom:62px;
}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px; 
margin:0 auto;
}

/ * Text */
#text {
    float: left;
    width: 780px;
}
#text p {
margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:24px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
float:left;
padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px
}


/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
} 
     
.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}

AyKay47 · October 4, 2011

a good practice is to use margins instead of breaks.

you can define a width for your parent div and set it to overflow: hidden in stead of using the clear: both hack..

music_fan01 · October 4, 2011

How can I use margins instead of breaks? I've always used breaks and didnt know you could use margins. Also, before I go adjusting my CSS would I do the following to clear the divs.

#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px; 
margin:0 auto;
overflow:hidden;
}

AyKay47 · October 5, 2011

How can I use margins instead of breaks? I've always used breaks and didnt know you could use margins. Also, before I go adjusting my CSS would I do the following to clear the divs.
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px; 
margin:0 auto;
overflow:hidden;
}

use margin-top or margin-bottom to separate your divs instead of breaks..

and the code that you wrote looks good in clearing the divs.. as long as that is your parent div that contains the floating divs.. clear:both is acceptable but in my opinion is an older practice..

music_fan01 · October 5, 2011

How can I use margins instead of breaks? I've always used breaks and didnt know you could use margins. Also, before I go adjusting my CSS would I do the following to clear the divs.
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px; 
margin:0 auto;
overflow:hidden;
}
use margin-top or margin-bottom to separate your divs instead of breaks..

and the code that you wrote looks good in clearing the divs.. as long as that is your parent div that contains the floating divs.. clear:both is acceptable but in my opinion is an older practice..

And the margin-to/margin-bottom goes in the css correct? It turns out that I put my clear div in the wrong. I thought I had my floating divs in the main div, turns out I have them in the text div.

AyKay47 · October 6, 2011

How can I use margins instead of breaks? I've always used breaks and didnt know you could use margins. Also, before I go adjusting my CSS would I do the following to clear the divs.
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px; 
margin:0 auto;
overflow:hidden;
}
use margin-top or margin-bottom to separate your divs instead of breaks..

and the code that you wrote looks good in clearing the divs.. as long as that is your parent div that contains the floating divs.. clear:both is acceptable but in my opinion is an older practice..
And the margin-to/margin-bottom goes in the css correct? It turns out that I put my clear div in the wrong. I thought I had my floating divs in the main div, turns out I have them in the text div.

answer to your question = yes

music_fan01 · October 6, 2011

How can I use margins instead of breaks? I've always used breaks and didnt know you could use margins. Also, before I go adjusting my CSS would I do the following to clear the divs.
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px; 
margin:0 auto;
overflow:hidden;
}
use margin-top or margin-bottom to separate your divs instead of breaks..

and the code that you wrote looks good in clearing the divs.. as long as that is your parent div that contains the floating divs.. clear:both is acceptable but in my opinion is an older practice..
And the margin-to/margin-bottom goes in the css correct? It turns out that I put my clear div in the wrong. I thought I had my floating divs in the main div, turns out I have them in the text div.
answer to your question = yes

Thanks! I think I got it.

Sign In

Floating an image to the left and two paragraphs to the right

Recommended Posts

music_fan01

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information