Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

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


  • Please log in to reply

#1
TheWern

TheWern

    Member

  • Member
  • PipPip
  • 81 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
  • 81 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
  • 81 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