2 replies [Last post]
riveter
riveter's picture
Offline
newbie
Michigan
Last seen: 6 years 49 weeks ago
Michigan
Timezone: GMT-4
Joined: 2013-09-01
Posts: 1
Points: 2

I am still new to CSS and have much to learn. I am trying to understand placement in a grid, with say, pictures and then content I want to sit to the left or right of said picture.

Let's say I have a 12 column grid I want to use for my page, each labeled accordingly starting from left to right from 1-12 respectively. So I have a picture I want to left align in column 3 that spans across through column 5. I then want to have column 6 blank and left align some paragraph text that will span columns 7-10. How do I do this?

I've tried putting in a div container with a class that houses a larger grid, and then using other divs with more classes and grids for placement:

Here's the html:

<div class= "mainContent grid_11 clearfix">
                <div class="mainTop">
                    <p class="grid_6 clearfix">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget arcu ac mi dictum tincidunt id sed neque. Praesent vehicula commodo orci, nec molestie metus fermentum id. Morbi non libero eget nisl malesuada feugiat non et nisl. Praesent tempus laoreet blandit. Suspendisse pellentesque at ipsum et pretium. 
                    </p>
                    <img src = "/mockups/mock6/img/schema.png" alt="schema" class="grid_4 clearfix">
                </div>
                <div class="mainBottom">
                    <p class="grid_6 clearfix">
                        Nulla accumsan gravida lectus, vel consequat elit fermentum ut. Ut a scelerisque nisi. Cras vitae vestibulum odio, elementum eleifend enim. Praesent et risus nec nunc varius venenatis vel ut lacus. Vestibulum cursus venenatis lectus, sit amet accumsan eros faucibus vel. Suspendisse et lorem libero.
                    </p>
                    <img src = "/mockups/mock6/img/schema.png" alt="schema" class="grid_4 clearfix">
                </div>
            </div>

Here's the CSS:

.mainContent {
    margin: 100px 85px 0;
}
 
.mainTop img {
    width: 250px;
    float: right;
    margin-right: 40px;
}
 
.mainTop p {
    float:left;
}
 
.mainBottom {
    margin-top: 300px;
}
 
.mainBottom img {
    width: 250px;
    float:left;
}
 
.mainBottom p {
    float:right;
    text-align:right;
    margin-right:40px;
}

I attached the grid css in txt format from a generator I found that seemed simple and worked well. But, there has to be a better way to do this. I have also found making the initial div be placed in columns 1-5 and then using margins, but it just doesn't seem...right.

Any help would be great. Like I said, I'm still new to all this, self teaching for about 3 months.

AttachmentSize
grid.txt5.32 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi riveter, If you are going

Hi riveter,
If you are going to use a grid then work with it, don't fight it.
Be careful when you wrap grid elements in other block elements, that they have had any margin and padding removed that may interfere with the grid.

From the look of your attached file you need to have everything wrapped in the class container_12.
Then to start at column 3 you need to use the classes prefix_3 grid_2 and suffix_1 on the image.
That should start the image from the 3rd grid, have it 2 grids wide and leave one grid space after it.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 20 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Alternative viewpoint

I say you should not only fight the grid, but destroy it. The grid system is an attempt to apply a print solution to the web. Way back in the "Old Days", newspapers and magazines and just about anything that got printed was laid out on what was called a paste up board. That is effectively what any of the grid systems is trying to do. It is anathema to the purpose and concept of a cascading style sheet. Even worse is what grid systems do to the semantic markup of your content.

Markup should represent the structure of the document by tagging elements for what they are in the structure. That includes class names and id tokens. When you make id="main-bottom-left" and class="grid_12", you've destroyed the semantics and broken the separation of structure and presentation. What happens to the sense of your stylesheet when you find the element#main-bottom-left is better if on the right?

Plus, you end up with a piss-pot full of stuff like this:

.container_12 .grid_1 {
    width:6.333%;
}
 
.container_12 .grid_2 {
    width:14.667%;
}
 
.container_12 .grid_3 {
    width:23.0%;
}

I guarantee if you learn to mark up your content as well structured, semantic html, and you learn to write your css in a contextual cascade, you will write robust documents that are easily maintained. Use grids, and you will bang up against its limits, but you won't know enough to help yourself get past them.

In a nutshell, grid systems are as backward as using tables for layout; that's pretty damned backward.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.