Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Basic CSS - putting 2 div's next to each other.


  • Please log in to reply

#1
TheWern

TheWern

    Member

  • Member
  • PipPip
  • 82 posts
Hi Guys,
I am glad there is no camera to see me blush. This MUST be SOOooo easy.

I copied a friend work and was trying to duplicate the style of CSS in a site for myself. In the Gallery, I want a picture on the laft and some text on the right.
I have it all done but cant get the text to appear NEXT to the photo. I have taken out everything non critical and included the html and .css file coding below.
PLEASE can someone put me out of my misery.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="stylesF1ArtTEST.css" type="text/css" media="all" />

<div id="body">
<div id="galleryphoto"><img src="" width="250" height="200" /> </div>
<div id="gallerytext">Some arbitrary text

<br />
£15.00

<br />
PayPal
</div>
</div>


body {
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: inherit;
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
background-image: url(Images/Flag5x1.png);
background-repeat: repeat-x;
margin-top: 15px;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
float: none;
}

#galleryphoto {
text-align: left;
color: inherit;
height: 200px;
width: 250px;
margin: 0px;
}
#gallerytext {
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 300px;
width: 200px;
}

  • 0

Advertisements


#2
aLemmer

aLemmer

    Member

  • Member
  • PipPip
  • 19 posts
Insert "float: left" therein "#gallerytext". Note the last line.
#gallerytext {
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 300px;
width: 200px;
float: left;
}

  • 0

#3
TheWern

TheWern

    Member

  • Topic Starter
  • Member
  • PipPip
  • 82 posts
I have tried that and it still shows below the other div (galleryphoto) and not next to it. I also tried with both having "float Left" and all the other combinations of one left, one right etc, still I cant get get it to work. I have managed to do this before and looking through the other code, I cant find a reason why it is doing this.

Thanks,
  • 0

#4
aLemmer

aLemmer

    Member

  • Member
  • PipPip
  • 19 posts
Why don't you post the full source to your document? You either incorrectly pasted the aforementioned code, or you have horrible code.
  • 0

#5
TheWern

TheWern

    Member

  • Topic Starter
  • Member
  • PipPip
  • 82 posts
Not to worry, I have sorted it out. I retried all the 'float' combinations and the 'float left' worked on the galleryphoto div. You were pretty close though. tks.
  • 0

#6
aLemmer

aLemmer

    Member

  • Member
  • PipPip
  • 19 posts
Ah yes, sorry, I mustn't had paid enough attention to what I was writing.
  • 0

#7
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
This is what I use: Examples and Codes

I hope that css is either external or embedded properly. You should always validate.

CSS Validation
HTML Validation

Edited by Major Payne, 03 June 2009 - 05:57 PM.

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP