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…


	<!-- 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>


#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

Here are a couple of possibilities to play with. Choose between table-cells as columns or floats by swapping the leftmost comment marks.



!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…


.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…


        .boxSubSection {
            overflow:hidden;       /* use this with floating columns */
        }

Still trying to figure out your example…

Debbie

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.

It wasn’t in the sample that you posted, so I can’t really guess why (uppercase notwithstanding <smile>).

It clears the floats within .boxSubSection. If you disable it, you will notice that the bottom margin of .boxSectionHome is reduced.

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 ??


	<!-- 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? :slight_smile:

Sincerely,

Debbie

Perhaps you can give this a gander. It’s another double feature. :cool:

Add the following to the css that I posted above:


.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:


    <!-- 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

I’m getting closer. Still working out a few kinks.

Will post my updated code shortly.

Thanks,

Debbie