Very simply: If this were to be a table, I would have two rows and three columns. In the first row would be an image, a video, and a different image. In the second row there is text, nothing, and text. The text corresponds to each of the images, so they should be lined up with the images above them. I also wanted everything centered on the page (and that's where things went wrong)
My best attempt at getting three images next to each other and centered caused the text to not go below the images. I don't know if I'm using the float style wrong or if I'm just not centering things the right way or WHAT, but if anyone can give me a pointer I'd really appreciate it. I hope I described my problem adequately.
Relevant HTML:
Expand|Select|Wrap|Line Numbers
- <div id="body">
- <div id = "student-wrapper" class="wrapper">
- <div id = "student-image">
- <a href="#">
- <img alt="Students Login" src="site images/students.png" width="300" height="190" />
- </a>
- </div>
- </div>
- <div id = "video-wrapper" class="wrapper">
- <iframe width="560" height="349" src="http://www.youtube.com/embed/cjaeYkTyUHk" frameborder="0" allowfullscreen></iframe>
- </div>
- <div id = "professional-wrapper" class="wrapper">
- <div id = "professional-image">
- <a href="#">
- <img alt="Professionals Login" src="site images/professionals.png" width="200" height="400" />
- </a>
- </div> <!-- END image div-->
- </div> <!-- END professional-wrapper div-->
- <div id="buffer"> </div>
- </div> <!-- END body div -->
- <div id = "goto-texts">
- <div id = "student-text">
- <a href="#">
- <p class="goto"> Start Here! </p>
- </a>
- </div>
- <div id = "professional-text">
- <a href="#">
- <p class="goto"> Start Here! </p>
- </a>
- </div>
- </div>
- </body>
Expand|Select|Wrap|Line Numbers
- div#body{margin: 25px auto 25px auto; width:1200px;}
- div#student-wrapper{margin-right:30px;}
- div#professional-wrapper{margin-left:30px;}
- p.goto{font-size:x-large; font-weight:bold}
- div.wrapper{float:left}
-Nick