Layout sections in single column page?

Hi all, I thought I was on a roll finishing my site up. I however ran into a couple of pages that need to be somewhat different.

What I have is a single column layout with the normal container, head, nav section and footer.

What has happened on one or two pages I would like to actually have multiple columns, not talking about text wrap here just two distinct areas. The areas should center within the main section with equal margins left, right and between.

I am not sure if I should add multiple floated divs floated side by side, use a flex box or possibly even some kind of display as table.

In the first example with the picture below I want the left to have content which is aligned just as it was the main section but have another section beside it with a local map imbedded from Google.

The second example would just simply be 4 separate boxes with an unordered list inside each box two wide and two high all the same size. That is the second example here.

Please advise on a good way to do this.

These are rather crude images but you will get the idea.



Thanks

Possible solutions:
http://codepen.io/anon/pen/yNVEmM
http://codepen.io/anon/pen/yNVqNb

Those do look good.
My current layout has the wrapper at 80% of the browser window and the elements are not sized separate. The layout looks something link this. What I need to know is on the samples you gave can they be placed between the <section> and </section> tags and still be fluid an mobile friendly?

If so that is exactly what I am looking for, just need to tweak the colors and boarders as the image was just a basic idea. What I plan to do is place an H3 with a heading describing what is to come below on both of the pages which is centered across the section, then the divided area below.

<div id="wrapper">
     <header>
     </header>
       <nav>
       </nav>
   <section>
   </section>
     <section id="links">
     </section>
  <footer>
  </footer>
</div>

Hi,

Back to work and tested out this code. The provided code is not flexible, I have a 40% mobile base and need the page to flow with various devices. Based on the above layout what I really need is to incorporate depending on the page either two boxes wide of equal size that center between the margins and are fluid. I also will need a similar page with 3 boxes wide and another page with two rows of two boxes wide.

I would like to place the boxes in the already created section area.

Hopefully this explains it better.

@megazoid’s code works perfectly. You just needed to change his fixed with to a fluid width and add media queries to suit your web page. Simple enough.

Copy the file to your PC, double click it so it opens in your browser.

sample-layout-tables-cells=megazoid.html|attachment (1.8 KB)

Here’s my version of @megazoid’s code with 2 rows of 2, 3 and 4 cells with media queries. No header, no footer, just rows of cells between section tags.

Copy the file to your PC, double click it so it opens in your browser.

FluidBoxes-Ohnoo.html (2.8 KB)

Thanks @ronpat, I did find that the code was flexible by removing the fixed width and things I did not need a few minutes ago. I will download your samples and work with them shortly, and report back.

I am in a chat with Corel at the moment. Seems that the new version when installed removes all coloring from my spread sheets? Will report back shortly.

Thanks

That looks good.
The reason I found it not fluid in the original test was I was checking it directly inside of code pen as it sat.

So I will work with this tonight and get things how I want them. I assume any styling such as putting a li or ol in the boxes will work fine as well as a flexable image.

Thanks will report back when I complete the task.

Okay here we go.
I have worked with the files. At this time I have integrated the table rows into my page and created a separate css file until all worked out.

I do have the two boxes centered in the page. What I need now however is three more small adjustments. The first being the text inside the boxes need to be centered in the boxes but text align right (not centered text). The second thing is I would like the boxes to be spaced at least a few pixels between them, and the last thing is no padding is required at the top and bottom of the inside of the boxes.

What I have so far is posted here.
http://www.quailrunrv.com/html5layout/contact.html

By the way I tried to past the Google code for a live map in the right side but no matter how I adjusted it, it wanted to break the layout. So I figure maybe best with just a static image linked to the online map.

Please restate that sentence. I don’t understand what you are saying

How many is a few?

Do you know how to remove the padding?

Okay here goes,
I have not used the box model before so not sure alignments are the same as other elements. I simply wish to make sure if only a small amount of text is on any given line in a box that it aligns to the left with equal left and right margins.

That is not a particularly important measurement. All I want once I put a solid border around the boxes is for people to know they are actually two different sections. Based on that I would guess maybe 10 pixels or about there what every makes the boxes distinct. I did not give a measure because I though it may need to be different depending on the amount of boxes on each row.

As for the padding, yes I am aware of how to change but again with the box model you used I was not sure if I should just change the padding line and specify each side separately.

Just too dog gone many things in the fire tonight. The computer I was designing this new site on died (leaky cap) Friday and I have been trying to make do with another old spare machine. Of course it does not have all of my applications installed so I am going back and forth between design and installing apps.

New computer to arrive Friday afternoon.

Thanks

This is the way I’m interpreting your text request.

CenteredTextBox.html (1.1 KB)

(The outlines are test outlines so you can visualize the boxes.)

Assuming you mean two or three columns with rows of cells, border-spacing and a margin within the table-cells is easily done and works nicely (megazoid’s layout). I could be misunderstanding since “boxes” is vague and then there are the section tags.

Hopefully this better explains. I now can sit at the machine as I have things back in order.

@ronpat

Hi, Just wanted to let you know that I have a working example of the two columns that I wanted using your code. It should be easy to understand now.
http://www.quailrunrv.com/html5layout/calendar.html

Basically take what is here and split the boxes with a space between. This way they look like two different columns.

Same for the three columns. Four columns will not be necessary.
If I need more boxes I will just create a second dive below for either the 2 or 3 column options. Will never go wider than three.

Once finished I would like to ask a little more about the code for a couple things I would like to understand for the future.

Thanks

Ohnoo,

Complete with orange borders . Give this code a whirl and see what you think. Although unlikely to be needed, you can stack rows in any combination that you wish. The demo stacks a row of 2 columns, then a row of 3, then another row of 2. Cut what you do not want from the HTML.

Note, a max-width should not be assigned to the table. To keep it simple, it should be assigned to the box in which div.articles is placed (.outer in this demo).

tables+cells-as-columns-4.html (4.0 KB)

1 Like

Okay thanks will chexk out. Been up a lot of hours like 30, just a lot going on.

Woke up saw the message so replied before going back to bed. Good thing boss likes what he sees.

As for the css what I wanted to understand is what is the ^ for and what is the function of three elements in a row like you have in your code where you have .elemen .element .element combined? Hopefully I can find some free time to get a book and read it instead of having to search on line for as many answers as possible. Yikes, lets slow the clock.

In my code, I use three similar classnames: .row2, .row3 and .row4.

[class^=“row”] {…}
The upward caret targets all selectors with a classname that begins with the string “row”

thus, I have targeted all three selectors.

I could have listed them separately, instead:
row2, row3, row4 {…}
which is the same as:
row2,
row3,
row4 {…}

One occasion where I see three elements [almost] in a row is:
@media screen and (max-width:500px) {
    .row2, .row2 .tcell {display:block;width:auto;}
}

The line consists of two selectors:
.row2   (which has {display:table})
and
.row2 .tcell   (which has {display:table-cell})
There, I was changing the table,   .row2,   and the table-cell,   .row2 .tcell   to   {display:block; width:auto;}

And like before, the selectors could have been written on separate lines:
.row2,
.row2 .tcell {display:block; width:auto;}

The newest code does not write the media queries quite so compactly, so perhaps they will make more sense.

This page shows a good list of selector patterns:
http://www.w3schools.com/cssref/css_selectors.asp

1 Like

Thanks for explaining, kind of like instead of saying border right left top and bottom you can just put the 4 sizes and be done.

When and if I ever get proficent in this I am sure I will use the compact way also. But for now it’s easier to see it layed out. Kind of why when I do margins and borders etc I write all sides.

If this was primary job would get proficent fast but multiple jobs mutlipal personalities I do the best I can and try to do it right. Not always easy

Gonna try next week to get to a book store and look at css books and find one that matches my style. Jumping into css from older table based sites takes a little bit different thought process. Actually more than expected.

I guess if the boss is happy all is well.

You’re not alone. Usually, I do not place comma-separated selectors on the same line because they tend to run together visually. I prefer an indented left vertical alignment of like items in my code. Obviously, I make exceptions, but mainly so when they are an obvious pattern that I can “see” clearly (even when tired).

My rule of thumb is simple… write code so you can read it and understand how it works a year later when a change is requested. To that end, I sometimes include comments explaining the reason behind certain code patterns.

No need to rush. You’ll develop your own perferred style of writing code eventually.

Being rather new to css I have just about commented every single line of my style sheet. I plan to clean it up better once I get final setup.

Then what I will do is save the commented version as read only, make a copy remove all comments for the version to place on line.

Going to check out the new suggestion now. I have all pages created and just need to update some for example the gallery with my own pictures. The last things not complete are the favicon and apple touch icons as well as small versions of the new logo for the facebook html pages and recoloring them.

So getting close, hopefully by the time I finish today I can have our mailing list residents check things out and let me know how it suits them.