Solved

CSS issues with page containers

Posted on 2013-05-20
4
347 Views
Last Modified: 2013-05-20
I am trying to create a standard web page that contains a top half (containing a background image - height: 105px) that stretches the full width of the page (width: 100%).  Inserted on the top half section is an image (980 x 105) that is centered.  What I am trying to do is insert a container underneath the top half with a width of 980px that is centered, thus allowing me to add other DIVs inside the container.  But I cannot figure out how to do this. Is this correct?

Top portion of page stretches full length of web browser.  The middle and bottom portion will be centered. Inside the centered portion (container) of the page will contain DIVs with different widths.

Attached is my code for review and any help is greatly appreciated.  Thank you.

Page:
default.htm


CSS:
master.css
0
Comment
Question by:arendt73
  • 2
4 Comments
 
LVL 9

Expert Comment

by:user_n
ID: 39182167
0
 

Author Comment

by:arendt73
ID: 39182232
What I need help with is setting up the container column down the middle of the page, underneath the top half of the page.  The image appears without issue, unless it is recommended that I change the way it appears.

Inside the center column will contain three columns, from right to left, the widths are: 180, 15, and 785. The position for each of the three columns totaling 980 should be top.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39182248
You are going in correct way. Just place "content" and rest divs that you need inside "table". Here is an example:
http://jsfiddle.net/m7WBw/
0
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 500 total points
ID: 39182278
Just saw your comment, so here is updated demo:
http://jsfiddle.net/m7WBw/1/
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now