SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Create 2-Columns in Fluid DIV

    Ugh! Time to dust off the cobwebs in the CSS part of my brain!! (Been away for a long time...)

    Okay, so I have a parent-parent DIV that has a max and min width.

    Inside that, is a parent DIV which is fluid.

    I now have added to child DIVs inside the parent, and want them to be side-to-side and each take up 50% of whatever the width of the parent is.

    Make sense?!

    If so, how do I do that?


    Here is what I have so far...
    HTML Code:
    	<!-- MIDDLE COLUMN -->
    	<div id="pageMidCol_2">
    
    		<!-- ARTICLE LISTING -->
    		<div id="boxSectionHome">
    			<h2>Finance</h2>
    
    			<div class="boxSubSection">
    				<h3>Economy</h3>
    				<!-- Sub-Section Featured Article -->
    				<div id="subFeatured">
    					<ul>
    						<li>Article 1</li>
    						<li>Article 2</li>
    						<li>Article 3</li>
    						<li>Article 4</li>
    					</ul>
    				</div>
    						
    				<!-- Sub-Section Article Links -->
    				<div id="subArticles">
    					<ul>
    						<li>Article 1</li>
    						<li>Article 2</li>
    						<li>Article 3</li>
    						<li>Article 4</li>
    					</ul>
    				</div>
    			</div>

    Code CSS:
    #boxSectionHome{
    	margin: 20px 220px 50px 0px;
    	padding: 0 20px 50px 20px;
    	min-width: 520px;				/* 0px + 20px + 520px + 20px + 200px = 760px Min-Width */
    	max-width: 960px;				/* 0px + 20px + 960px + 20px + 200px = 1200px Max-Width */
    	clear: both;
    	text-align: justify;
    }
     
    #boxSectionHome h2{
    	margin: 0 -20px 0 -20px;
    }
     
    .boxSubSection{
    	margin: 30px 0 0 0;
    }
     
    #subFeatured{
    	width: 50%;
    }

    Sincerely,


    Debbie

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Here are a couple of possibilities to play with. Choose between table-cells as columns or floats by swapping the leftmost comment marks.

    Code:
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1030468-Create-2-Columns-in-Fluid-DIV
    Thread: Create 2-Columns in Fluid DIV
    2013.04.12 11:48
    DoubleDee
    -->
    <head>
        <title>Floats or table-cell columns</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .boxSectionHome {
        margin: 20px 220px 50px 0px;
        padding: 0 0px 50px 0px;
        min-width: 560px;               /* 0px + 0px + 560px + 0px + 200px = 760px Min-Width */
        max-width: 1000px;              /* 0px + 0px + 1000px + 0px + 200px = 1200px Max-Width */
        clear: both;
        text-align: justify;
        outline:1px solid magenta;
    }
    
    .boxSectionHome h2 {
        margin: 0;
    }
    
    .boxMidSection {
        outline:1px solid green;
        margin: 0 20px 0 20px;
    }
    .boxSubSection {
        margin: 30px 0 0 0;
        outline:1px solid cyan;
    /*    display:table;         /* use this with table-cells as columns */
    /*    table-layout:fixed;    /* use this with table-cells as columns */
    /*    width:100%;            /* use this with table-cells as columns */
        overflow:hidden;       /* use this with floating columns */
    }
    
    .subFeatured,
    .subArticles {
        width:50%;
    /*    display:table-cell;    /* use this with table-cells as columns */
        float:left;            /* use this with floating columns */
        outline:1px solid red;
    }
    
        </style>
    </head>
    <body>
    
        <!-- MIDDLE COLUMN -->
        <div id="pageMidCol_2">
    
            <!-- ARTICLE LISTING -->
            <div class="boxSectionHome">
                <h2>Finance</h2>
                <div class="boxMidSection">
                    <h3>Economy</h3>
                    <div class="boxSubSection">
                        <!-- Sub-Section Featured Article -->
                        <div class="subFeatured">
                            <ul>
                                <li>Article 1</li>
                                <li>Article 2</li>
                                <li>Article 3</li>
                            </ul>
                        </div>
                        <!-- Sub-Section Article Links -->
                        <div class="subArticles">
                            <ul>
                                <li>Article 1</li>
                                <li>Article 2</li>
                                <li>Article 3a</li>
                                <li>Article 3b</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Here are a couple of possibilities to play with. Choose between table-cells as columns or floats by swapping the leftmost comment marks.

    Code:
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1030468-Create-2-Columns-in-Fluid-DIV
    Thread: Create 2-Columns in Fluid DIV
    2013.04.12 11:48
    DoubleDee
    -->
    <head>
        <title>Floats or table-cell columns</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .boxSectionHome {
        margin: 20px 220px 50px 0px;
        padding: 0 0px 50px 0px;
        min-width: 560px;               /* 0px + 0px + 560px + 0px + 200px = 760px Min-Width */
        max-width: 1000px;              /* 0px + 0px + 1000px + 0px + 200px = 1200px Max-Width */
        clear: both;
        text-align: justify;
        outline:1px solid magenta;
    }
    
    .boxSectionHome h2 {
        margin: 0;
    }
    
    .boxMidSection {
        outline:1px solid green;
        margin: 0 20px 0 20px;
    }
    .boxSubSection {
        margin: 30px 0 0 0;
        outline:1px solid cyan;
    /*    display:table;         /* use this with table-cells as columns */
    /*    table-layout:fixed;    /* use this with table-cells as columns */
    /*    width:100%;            /* use this with table-cells as columns */
        overflow:hidden;       /* use this with floating columns */
    }
    
    .subFeatured,
    .subArticles {
        width:50%;
    /*    display:table-cell;    /* use this with table-cells as columns */
        float:left;            /* use this with floating columns */
        outline:1px solid red;
    }
    
        </style>
    </head>
    <body>
    
        <!-- MIDDLE COLUMN -->
        <div id="pageMidCol_2">
    
            <!-- ARTICLE LISTING -->
            <div class="boxSectionHome">
                <h2>Finance</h2>
                <div class="boxMidSection">
                    <h3>Economy</h3>
                    <div class="boxSubSection">
                        <!-- Sub-Section Featured Article -->
                        <div class="subFeatured">
                            <ul>
                                <li>Article 1</li>
                                <li>Article 2</li>
                                <li>Article 3</li>
                            </ul>
                        </div>
                        <!-- Sub-Section Article Links -->
                        <div class="subArticles">
                            <ul>
                                <li>Article 1</li>
                                <li>Article 2</li>
                                <li>Article 3a</li>
                                <li>Article 3b</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    </html>

    Thanks for the reply. Looking at your code now.

    What purpose does this addition serve...
    Code:
    .boxMidSection {
        outline:1px solid green;
        margin: 0 20px 0 20px;
    }

    Also, I had added Float: Left to #subFeatured and #subArticles and it didn't work.


    What does this do...
    Code:
            .boxSubSection {
                overflow:hidden;       /* use this with floating columns */
            }
    Still trying to figure out your example...


    Debbie

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Thanks for the reply. Looking at your code now.

    What purpose does this addition serve...
    Code:
    .boxMidSection {
        outline:1px solid green;
        margin: 0 20px 0 20px;
    }
    It is a ronpat choice. I like to containerize things. It allowed me to change the horizontal padding/margins so the negative horizontal margin on <h2> was not needed. Simplified the min-width and max-width calcs a tad. It also encloses the <h3> line which needs to preceed .boxSubSection. It is not absolutely needed. There was nothing subtantially wrong with your method.

    Quote Originally Posted by DoubleDee View Post
    Also, I had added Float: Left to #subFeatured and #subArticles and it didn't work.
    It wasn't in the sample that you posted, so I can't really guess why (uppercase notwithstanding <smile>).

    Quote Originally Posted by DoubleDee View Post
    What does this do...
    Code:
            .boxSubSection {
                overflow:hidden;       /* use this with floating columns */
            }
    It clears the floats within .boxSubSection. If you disable it, you will notice that the bottom margin of .boxSectionHome is reduced.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    It is a ronpat choice. I like to containerize things. It allowed me to change the horizontal padding/margins so the negative horizontal margin on <h2> was not needed. Simplified the min-width and max-width calcs a tad. It also encloses the <h3> line which needs to preceed .boxSubSection. It is not absolutely needed. There was nothing subtantially wrong with your method.
    Hmm... *thinking*

    I think I'm getting closer. Say, on a side-question, how do I get the image below to move to the right of the Heading and Paragraph but still stay inside the container #subFeatured ??

    HTML Code:
    	<!-- ECONOMY (sub-section) -->
    	<div class="boxSubSection">
    		<h3>Economy</h3>
    		<!-- Featured Article -->
    		<div id="subFeatured">
    			<img class="noborder" src="/images/HatShop_100x70.png" width="100" alt="" title="Hat Shop" />
    			<h4>Which states support Main Street?</h4>
    			<p>Policy makers everywhere pledge to support small firms. But not every state government follows through.</p>
    		</div>

    If I can get that fixed, maybe I can show you a screenshot?

    Sincerely,


    Debbie

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Perhaps you can give this a gander. It's another double feature.

    Add the following to the css that I posted above:
    Code:
    .subFeatured img {
        display:block;
        width:100px;
        height:70px;
        float:right;
        background-color:#ccc;
        margin:5px 0 0 12px;
    }
    .subArticles div {
        outline:1px solid #ff0;
        display:table-cell;
        vertical-align:middle;
    }
    .subArticles img {
        display:block;
        background-color:#ccc;
        width:100px;
        height:70px;
    }
    Then replace the body code with the following:
    Code:
        <!-- MIDDLE COLUMN -->
        <div id="pageMidCol_2">
            <!-- ARTICLE LISTING -->
            <div class="boxSectionHome">
                <h2>Finance</h2>
                <div class="boxMidSection">
                    <h3>Economy</h3>
                    <div class="boxSubSection">
                        <!-- Sub-Section Featured Article -->
                        <div class="subFeatured">
                            <img class="noborder" src="/images/HatShop_100x70.png" width="100" alt="" title="Hat Shop" />
                            <h4>Which states support Main Street?</h4>
                            <p>Policy makers everywhere pledge to support small firms. But not every state government follows through.</p>
                        </div>
                        <!-- Sub-Section Article Links -->
                        <div class="subArticles">
                            <div>
                                <h4>Which states support Main Street?</h4>
                                <p>Policy makers everywhere pledge to support small firms.</p>
                            </div>
                            <div>
                                <img class="noborder" src="/images/HatShop_100x70.png" width="100" alt="" title="Hat Shop" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    The image in .subFeatured is floated to the right, so it rests in the top right of the div. With a little margin and padding treatment on the image and text, everything should look OK. Remember to not add margins or padding to the parent container, div.subFeatured, as its width is already set to 50%. This method uses white space efficiently in that text can flow beneath the image.

    The contents of .subArticles have been placed in two table-cells: image on the right, text on the left.
    It's not very economical space-wise, but the image can be vertically centered, if that's important to you.
    Padding can be added to the table-cells as needed. Table-cells cannot contain floats or positioned elements.

    Cheers,
    Ron

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm getting closer. Still working out a few kinks.

    Will post my updated code shortly.

    Thanks,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •