Jump to content

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


porkypie

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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...