综合编程

3 Column Site Columns Floated Left But Not Appearing in Correct Order

微信扫一扫,分享到朋友圈

3 Column Site Columns Floated Left But Not Appearing in Correct Order
0

I’m working on a 3 column site which I am converting to a RWD and which was previously laid out with nasty neg px margins but I am converting all this to percentages and em’s so that the site will best suit a wide range of devices.

My problem is very similar to the post that can be seen here; HTML float right element order

I have tried what was suggested in this article by @bookcassey by placing all the columns in a container which is floated right with all the child elements inside floated left but even doing this I still can’t get the columns in order of #NavColumn #ContentColumn #ExtraColumn.

The HTML is

<!DOCTYPE html>

<html>

<head>

<title>3 Col Page</title>

<meta name='description' content='Sample 3 Column Page'>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="./support-files/landscapemobile.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />

</head>
<body>

<div id="PageWrapper">
    <div id="Header">
    <div class="Liner">

    Header Links Etc

    </div> <!-- End Header Liner -->
    </div> <!-- End Header -->

    <!-- Begin Center Column Content -->
    <div class="OuterBG threecol"> <!-- disregard. There are no rules for this. This was part of a tut-->
    <div class="MidBG"> <!-- disregard. There are no rules for this. This was part of a tut-->
    <div class="InnerBG">
    <div id="ContentColumn"> <!-- col1 in tut -->
    <div class="Liner">

<h1>Page Headline</h1>

Page Content, Images Lorem Upsim etc...

</div> <!-- End Content Column -->
</div> <!-- End Liner -->

<div id='NavColumn'>
<div class='Liner'>
<div class='Navigation'>
Site 
Navigation
Links
</div><!-- end Navigation -->        
</div><!-- end Navigation Liner -->
</div><!-- end NavColumn -->

<div id='ExtraColumn'>
<div class='Liner'>
Extra
Column 
Content
</div><!-- END Extra Column Liner-->
</div><!-- END ExtraColumn -->


</div><!-- END colleft -->
</div><!-- END colmid -->
</div><!-- END colmask and threecol -->
<div id='Footer'>
Footer Content, Address etc...
</div>
</div><!-- END PageWrapper -->

</body>
</html>

And the CSS

#PageWrapper{ 
    margin:1em auto;
    max-width:60em; /*960px / Default Font Size of 16px = em result*/
    border:0.3125em groove #DDDDDD;
    background-image:url(../image-files/background.gif);
    background-repeat:repeat-y;
}

.InnerBG{float:right;/*border:3px solid red;*/width:100%;}

#Header{position:relative;}

#Header .Liner{padding:0;}

#Header a.header-home-link{max-width:60em;display:block;}

#Header img{display:block;}

#ShareThis{width:100%;margin:1em auto 2em;}

#NavColumn, #ContentColumn, #ExtraColumn {float:left;}

#ContentColumn{max-width:62.50%;/*border:2px solid green;*/width:100%;}

#NavColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}

#ExtraColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}

Side Note: The colored columns were something I was trying to "See" each column

I’ve been through an untold number of tutorials and have been working on this for longer than I care to admit while trying every possible combination of CSS rules to no avail and if anyone knows how I could remedy the way the columns are displaying as can be seen here: http://classifieds.your-adrenaline-fix.com/
, I’d be MOST appreciative and I thank each and everyone of you in advance.

Problem courtesy of: Stuart Y

Solution

I managed to do more or less what you were asking (except for your "Share This" column, which wasn’t there) by putting the first two columns in the MidBG
div, which I floated left. Then I floated the first column right, so that the second one ended up before the first one, and the third one ended up to the right.

I also had to remove lots of width:100%
s, which messed things up.

See fiddle
.

Not sure if this is what you wanted, but it is what you asked for…

Solution courtesy of: Mr Lister

Discussion

I’ve no idea why you have so many wrappers but moving your containers around will get you what you want. NavColumn, then ContentColumn, then ExtraColumn.

<div id="PageWrapper">
    <div id="Header">
        <div class="Liner">Header Links Etc</div>
    </div>
    <div class="OuterBG threecol">
        <div class="MidBG">
            <div class="InnerBG">                    
                <div id="NavColumn">
                    <div class="Liner">
                        <div class="Navigation">Site Navigation Links</div>
                    </div>
                </div>
                <div id="ContentColumn">
                    <div class="Liner">
                         <h1>Page Headline</h1>Page Content, Images Lorem Upsim etc...</div>
                    </div>
                <div id="ExtraColumn">
                    <div class="Liner">Extra Column Content</div>
                </div>
            </div>
        </div>
    </div>
    <div id="Footer">Footer Content, Address etc...</div>
</div>

http://jsfiddle.net/rWtDa/

Discussion courtesy of: bmasterson

Your code is very sloppy and disorganized and you have a lot of extraneous stuff going on in there, but since you didn’t write much I think it’s best you start over.

I wrote out a basic three column layout that can get you started with what you want to do. I also allowed it to be fluid(RWD) as you wanted.

Keep this same concept in mind when building your site and you should be fine.

<body>
<div id="wrap">
<div id="col1">
</div>
<div id="col2">
</div>
<div id="col3">
</div>
</div<!--end wrap-->
</body>

CSS

#wrap{
width:100%;
}

#col1{
background-color:blue;
width:33.33%;
height:200px;
float:left;
}
#col2{
background-color:red;
width:33.33%;
height:200px;
float:left;
position:relative;
}
#col3{
background-color:green;
float:right;
width:33.33%;
height:200px;
position:relative;
}

@media screen and (max-width:320px){
#col1,#col2,#col3{
    float:none;
    position:static;
    margin:0 auto;
    width:100%;
}
}

Check it out http://jsfiddle.net/gZ7MY/
Shrink the ‘Result’ window to see it in action ;)

Discussion courtesy of: Josan Iracheta

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


CSS3 Recipes

【链得得独家】安倍表态力挺区块链,日本市场小阳春乍现

上一篇

GitHub Helps Me Help Students

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
3 Column Site Columns Floated Left But Not Appearing in Correct Order

长按储存图像,分享给朋友