Jump to content

Can't get <div>'s to display at the right spot

Recommended Posts

Hey, I have to use HTML & CSS to make a project for school. I'm a beginner and i'm having a small problem. After a lot of searching on the internet and not finding a solution I decided it woud be best to ask for some help here. I've attached a .css and .html file to this post so you can see what i did ;). What I want to accomplish is 2 rows with 3 <div>'s next to eachother. Together they should have the same width as the menu and every <div> should have the same size. Also they should be underneath the grey bar and above the footer. As you can see right now there's 6 <div>'s next to each other and they're definitly not the right size. I would really appreciate it if someone could explain me how I can fix the <div>'s so i can make them look like how I want them to (preferably in baby-language). If my story isn't clear enough but you want to help me, don't hesitate to ask ;) Thanks in advance! greets,Porkypie Style.cssTeams.html

Link to post
Share on other sites

Your div positioning seems to be missing. Use a developer tool, such as firebug, to be able to "see" what's really happening with your display.

Edited by niche
Link to post
Share on other sites

Try creating a class for all of the divs with something like:

<html><head><style>.div-group {    display:inline-block;    width:33%;    height:150px;    background-color:#900;}</style></head><body><div class="div-group"></div><div class="div-group"></div><div class="div-group"></div><div class="div-group"></div><div class="div-group"></div><div class="div-group"></div></body></html>

You don't actually need the "background-color:#900;" that was for my testing purposes :)

Link to post
Share on other sites

Join the conversation

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

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

  • Create New...