Jump to content

How to display contents in a div side by side instead of on top of each other?

- - - - -

  • Please log in to reply
6 replies to this topic

#1
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
I was cleaning up my code a bit and decided to put my two paragraphs into two columns and float them to the left of my image. In cleaning up my code and trying to put my paragraphs into one div, my paragraphs ended up being underneath my image instead of to the right. Not sure if I did something wrong in my css.


/* body */
body {
 margin:114px 0 0 0; 
line-height:15px; 
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; 

}
#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;
overflow:hidden;
margin-bottom:3cm;
}

/* Text */
#text {
    float: right;
    width: 760px;
    margin-top:1cm;
}
#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:25px; 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

}

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


/* image */
#image {
width: 400px;
}
img.floatLeft { 
    float: left; 
    margin: 4px;
}

/* paragraphs */
#p {
    float: left;  
    margin-right: 4px;
    padding-left: 20px;
    font-size:12pt;
}

/* Divider */
#div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}
#container {
margin: 20px auto 900px auto;
width: 1000px;
}
aside {
width: 400px;
float: left;
}
section {
margin: 0;
padding: 0 0 20px 0;
overflow: auto;
text-align: left;
}
p {
margin: 0 50px 10px;
text-indent: 20px;
}





<!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>Blank</strong></h1>
</div>

<img src="images/test.jpg" class="floatLeft" width="360px;" height="332px;"/>

<div id=""container">
<aside>
<h2>Header for paragraph 1</h2>
  <p>Test
     </p>
</aside>
<section>
<h2>Header for paragraph 2</h2>
<p>Test</p>
</section>

</div>
</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>




#2
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US
Right under the '<img ...' ,

hoku_2000_99 said:

<div id=""container">
, have you tried changing the
id=""container"
to
id="container"
?

#3
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
Thanks that worked! Now both of my paragraphs are on top of each other. How do I get them side by side?

#4
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US
At a guess, either CSS float:right, or a table.

#5
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
float:right didnt work.

#6
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US
I would have tried using tables. Though some people think that tables are "too old" , or something. I don't care too much, though, what those people say; tables make things easier.

If you really don't want to use tables, then I don't know what else you would try, as I'm not a CSS expert :), but there might be other people on this forum who know what else to do, as a more CSS-like alternative to tables.

#7
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
Thanks! I'll keep trying and checking this topic often to see if there are other replies. :)




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users