Jump to content

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

music_fan01

By music_fan01
in CSS Help

 Share

Recommended Posts

music_fan01 Member

music_fan01

Posted
Posted

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;
}

 

music_fan01 Member

music_fan01

Posted
  • Author
Posted

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 Member

AyKay47

Posted
Posted

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 Member

music_fan01

Posted
  • Author
Posted

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 Member

AyKay47

Posted
Posted

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 Member

music_fan01

Posted
  • Author
Posted

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.  :)

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.