Css Containers and Positioning

[Jdubtrey]

I am new to css and im trying to learn the basics to complete a website. I created one main container for the whole website and then added other containers in the website to seperate the content(header,navigation,main content and footer). I am using internet explorer so im not sure if this has something to do with my errors. One of the issues i am having is the footer is not at the bottom of the main container,even though i set marigns to 0. Instead, it is displayed at the bottom of the end of text which is in the main content(the main container is in grey for now for visual purposes). This is also a problem because the content ,in the main content section,forces the website to stretch vertically even though i set the porportions of the container to a certain height. The second issue i am having is wrapping text around the image. I set the image where i wanted to set it within the main content area and also floated the text to the left and also set margins for the text but once the text goes past the image it wont wrap around the image correctly. Thanks in advance for the support. I have been working on css and html for about a week now and i have no other programming experince. I will add the code and send a link to the site im creating so you have a visual refrenece.

http://james.unitedti.org/businessconsulting.html (the link to the website)

Code:

Code:

• Home
• Consulting Services
• Marketing Research
• Business Analysis
• Contact

Company Overview

This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company. This is where you would add in information about the consulting company.

[dcp3450]

You need to review your whole code. The site looks different in other browsers. Download Firefox, Chrome, and Safari to ensure the site looks correct in all major browsers not just IE. For example, in IE everything is centered. In the other browsers everything is left aligned, everything. In the other browsers, there is no footer anywhere.

[dcp3450]

keep in mind, in IE text-align: center; will align everything. Other browsers you need to position the div.

You’re relying on IE to auto position based on the div locations. To get the site to respond properly review the use of absolute and relative positioning. Also, you will need to set your padding, margins, etc. Your footer is not displaying correct because you are not positioning anything.

For example if you place position: relative; and margin: 0 auto; it will center align the page on all browsers including IE. Your child divs need to be positioned as well.

[Jdubtrey]

Okay im downloading firefox and google chrome now. I can already see that cross browser compatibility and different screen resolutions is going to hell. I am learing this by just picking up a book so i have no formal training in any type of programming. Looks like i need to do some more reading :) I know theres a way to make a website stretch and keep its proprotions or even stay centered but how do i tackle different browsers? Is there some type of conditonal statement that detects the browser your running then runs the website a certain way?

[TheDoc]

If you’re just starting out, I’d recommend sticking with a fixed-width website for the time being. Aim for around 960-990px width. It will be much easier to wrap your head around divs, floats, and clears when you know exactly what they should be doing.

[Capt Otis]

"Jdubtrey" wrote:

Okay im downloading firefox and google chrome now.

Just to let you know, Firefox and Google Chrome run off basically the same engine. Meaning pages are going to display almost exactly the same in them. If you are aiming for cross-browser compatibility, try getting your hands on Safari rather than Chrome.

-T

[Jdubtrey]

I made a website layout to help me understand a couple concepts in css. The first website i made was a two column website with a header,navigation and footer column that was wrapped in one large container. I tested it out in internet explorer and safari and they both display the website the way I attended it to display. I wanted to make another website with a three column layout using absolute positioning but maybe im not understanding the concept. In the first website i floated the two column content to the left and right but now that i have three columns I cant use that feature. So, i tried to use absolute positioning by setting the first column to a margin of 0 and then the second column to the edge of the first column and the final column to the edge of the second column. The columns display all to the left and are vertically piled on top of each other. I also tried adding a postion:relative; to the body but that didnt work either. I know this is basic but any help of advice is greatly appreciated! I just realized the </head> tag should be after the </style> tag..sorry dumb mistake(but still doesnt work)Here is the link online.

james.unitedti.org/3column.html

Here is the code.

Code:

[Author]

Posts