Absolute positioning not working past first two divs

HTML & CSS
1

I am trying to do something that seems like it should be fairly simple but every time I try to execute it I come up with Problems. Maybe I am going about it the wrong way. I am pretty sure that is the case. In one of my <div> tags I am trying to get 4 <div> items to sit side by side. I would love any suggestions, tips, help. . .

Here are my <div>'s

[INDENT] <div id"Tiles">
<div id=“When”>
<p>Save The Date <br> September, 6th 2014 <br> 7:00pm - Midnight</p>
</div>
<div id=“Where”>
<h2>Downtown Camas</h2>
<p>Entrance will be at <br> 5th Ave and Birch St</p>
</div>
<div id"Ware">
<p>You must ware all white. Get fancy, sassy, crazy. White wigs welcome. Bring dancing shoes.</p>
</div>
<div id"Tickets">Tickets start at $30 for general admission. Must be 21. Bring a Picnic. See more about what to bring. . .</div>
</div> <!-- end of Tiles –>[/INDENT]

Now for the CSS
I am trying to use absolute positioning, which dose not seem to be working out well. I can move <div id=“When”> about 30 px from the left and <div id=“Where”> as well but the other two wont budge.

here is my css i have been playing with

[INDENT]/*Position of Save the date section */

#When, #Where, #Ware, #Tickets {
position: absolute;
border: 3px solid red;
}

#When { left: 20px;
}

#Where {
left: 200px;
}

#Ware {
left: 200px;
}

#Tickets{
left: 400px;
} [/INDENT]

2

shiso, please click the link at the bottom of my post and read how to include code in a post. Ideally, we would like it to be a complete working file that we can run on our computer.

The code that you’ve posted above looks like the third and fourth divs are missing an equals sign after “id”:


<div id"Ware">
<div id"Tickets">

should be:


<div id[color=blue]=[/color]"Ware">
<div id[color=blue]=[/color]"Tickets">

See if that helps. If it does not, please let us know.

3

Thank you, I will read the link you posted for future reference. I am sorry about that. I am still new at posting on forums in general.

That totally fixed my problem. I keep forgetting how picky this html and css can be. One simple item left out can through a wrench in the whole thing.

4

No problem, shiso. We were all new at one time. :slight_smile:

:lol: I can identify with that. :slight_smile: When I have a problem with my code, the first thing I check is punctuation. It is surprising how many times a keypress is missed by the computer :shifty:

Cheers

5

Thank you. And now I will test what I learned on posting code samples. Heres how its turned out so far. . . Although I am not sure if I am supposed to post this link

[URL=“http://codepen.io/anon/pen/JwHjv”]http://codepen.io/anon/pen/JwHjv

or this one

[URL=“https://gist.github.com/anonymous/056e2a7cc5fc0fc4af2a”]https://gist.github.com/anonymous/056e2a7cc5fc0fc4af2a

6

Hi, shiso. Your example post #5 is fine and the links are appropriate. Nicely done. I generally see more CodePens that Githubs; however, you are welcome to choose whichever medium you wish. CodePen and Github do not include the <!doctype> and <head> information of your original code. Depending on the issue, sometimes it’s useful to create a working page file and include the code for the working page in a message. That is done by surrounding the code with “code” tags like this:
[noparse]


your working code here

[/noparse]
Clicking the hash symbol in the editing bar will post the tags for you.

Looks like you are a ‘quick study’. We look forward to hearing from you in the future.

Enjoy! :slight_smile: