Centering Layout for New Page

Hi all,

I’m back again. :man_astronaut: Unfortunately, I’m still making small children cry :weary: by forgetting some basic fundamentals that I have already learned before here. It may be worthwhile for me to go ahead and sign up for the books bundle that is being run by Sitepoint. The problem is that I’m not a full-time developer or even close to that, so what I learn might be forgotten; however, I might want to grab a CSS book just so I have one. It looks like the main page has changed over the last year. Looking over my posts, I think I have already asked about this centering issue before, but I have over 650 posts here by now. I also looked at some other resources online, but I still haven’t fixed this basic centering issue.

This website is for my main grind as a freight broker:

.headercontainer will not center despite the display: inline block; value and the margin set at 0 auto.

Obviously, I just started coding this yesterday, and its problems are much more than just a centering issue, but I’m trying to keep this targeted to each issue as I work through this design.

This page is going to be very simple as I would like to complete it by the end of next week.

To success,
ty :smashy:

Hi, Ty,

See if this works for you…

.headercontainer {
    display: table;  /* changed from inline-block */

Yes, ronpat, this certainly does the trick on the container. :wink: I’ll assume that child divs that have a display value of table-cell need to have their parent div to display as a table just as a relatively positioned block element functions as a container for all child elements positioned absolutely (correct me if I’m wrong).

The other centering issue is the h1 text of “First Rate Logistics” that will sit “invisibly” underneath the logo image for accessibility purposes. It does not seem to center within .headerMC (line 21 in markup). It also overflows without wrapping the text to another line as well as seem to inherit the padding I assigned to .headerMC in the CSS at line 43. Shall I hide the overflow after centering that h1, too?

I removed the image in anticipation of working on that later.
Files updated: firstratefreight.net

-ty
the struggling noob :smashy:

:+1:

Sounds essentially correct. The parent property of an element assigned as display:table-cell should be a CSS table (or the grandparent element should be a CSS table if the CSS table-cells are within a CSS table-row).

On the other hand, a CSS table is not required to contain CSS rows or table-cells. In which case it is a box with table characteristics.

Let’s take this in small chunks.

If the logo image has been removed, please restore it.

I don’t see the page shrinking responsively. Do you have any fixed dimensions preventing it from shrinking?
Hmmmm…

.logocontainer img {
    height: 488px;
    width: 724px;
}
.logocontainer img {
    overflow: hidden;
}

consider

.logocontainer img {
    width:100%;
    max-width: 724px;
    height: auto;
}
.logocontainer img {
/*    overflow: hidden;  /* DELETE Me. Inappropriate, useless. */
}
2 Likes

I see you have found a different fix for this in your specific case.
But for future reference, using margin: 0 auto will work on an element which is display: block and has a defined, limited width (max-width or width).
As you found, it also works with display: table, as tables (and pseudo tables) are like blocks, in that they are not inline elements.
When an element is inline-block, it is like inline in that to centre it you would use text-align: center on its parent element. Inline elements behave like text.

1 Like

Sam,

Those are very astute points (as usual). I have read your point no less than 10 times about block elements aligning to the center with margin: 0 auto; as long as they have been assigned a definitive width or max-width.

This is another point I am trying to internalize as it explains another point in the struggle of “can’t move something” vs. “this moves something”. For example, a <span> element can already be manipulated with properties such as text-align; whereas, a <div> is a block element and cannot be positioned without defining its width (or its table display properties) before assigning an auto margin. I hope this demonstrates some level of comprehension. :fearful:


Ronpat,

I have adjusted the styles to what you listed above. The files are updated @ firstratefreight.net
Also, I discovered that clear fix for floats that I have in the WorldReviewGroup page are necessary for the appropriate expansion of the middle div, .headerMC, for its content held within. Why that is… I don’t know.

For now, the header text sits above the logo image (that I replaced with a new version).
The logo image concept is as follows:

-The <h1> sits underneath the logo using absolute positioning and only displays at viewport widths less than, say, 375 pixels (or somewhere around there). I may want to add some extravagant styles such as a glow to the text in case that it does display in lieu of the logo image I designed.

-The image is now a .png and has 2 different sizes for a CSS media query (again, similar to the concept of the logo at WorldReviewGroup.com); however, I had a bit of an idea that I would like to display a hover state, and that is why there are 2 extra “states” for the image. Maybe Sitepoint patrons will frown :frowning_face: upon that as the image will not be displayed in a link. It would simply be an interactive image.

This could be the only page on the whole site. It will have this header portion (grid displayed as a table) followed by a body portion containing a simple “About Us” portion and maybe a few photos.

I’m going to take a short break from this for a while. You may see updates to the code if you re-visit this thread several hours from now or tomorrow or whenever.

Your responses are always appreciated.

-ty :smashy:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.