problem getting two column layout

surreal5335 · 11-02-2012, 11:00 PM

I am creating a two column layout with div's. While I have done this many times before with little problems. This time I am stumped.

Its a very basic setup:

Code:

<div class="xml_form">
    <table>
        <tr>
            <td>Input 1</td>
            <td><input type="text" id="input_1" size="10"  class="input_fields" /></td>
        </tr>
        <tr>
            <td>Input 2</td>
            <td><input type="text" id="input_2" size="40" class="input_fields" /></td>
        </tr>
    </table>

        
</div>	
<div class="clear"></div>
<div class="modal_group" >
    <a href="#request" class="nyroModal" ><div class="modal_button">Request</div></a>

</div>

Here is my css:

Code:

.xml_form
{
    width: 45%;
    float: left;
    margin: 10px;
}

.modal_group
{
    width: 45%;
    margin: 10px;
}

.clear
{
	clear: both;
}

I did it first without the clear div separating but that caused the .modal_group div to wrap around everything. The clear fixed that but did nothing for the single column layout issue.

Anybody have a suggestion about this? Never had such trouble before

Appreciate it

LearningCoder · 11-03-2012, 12:05 AM

So you want a single column with 2 divs one above the other, within a 'container'? Or do you want your form on the left hand side and your 'request' anchor on the right?

If you want them side by side, try this code. Not sure if this is exactly what you want.

Code:

<html>
<head>
   <title>Vs Page</title>
</head>
<style type="text/css">

.wrapper 
{
    width: 80%;
    padding: 1%;
	border: 1px solid black;
    height: 400px;
}

.xml_form
{
    width: 45%;
    float: left;
    margin: 2%;
	border: 1px solid black;
	height: 300px;
}

.modal_group
{
    width: 45%;
    margin: 2%;
	float: right;
	bordeR: 1px solid black;
	height: 300px;
}


</style>
<body>
<div class="wrapper">
<div class="xml_form">
column 1
    <table>
        <tr>
            <td>Input 1</td>
            <td><input type="text" id="input_1" size="10"  class="input_fields" /></td>
        </tr>
        <tr>
            <td>Input 2</td>
            <td><input type="text" id="input_2" size="40" class="input_fields" /></td>
        </tr>
    </table>

        
</div>	
<div class="modal_group" >
column 2
    <a href="#request" class="nyroModal" ><div class="modal_button">Request</div></a>

</div>
</div>
</body>
</html>

I'm a little confused because you say you want a 2 column layout, but you were using another div to clear the float of the .xml_form
div (which I have deleted in my code example) which led me to think you wanted them underneath each other.

P.S - Added borders just for visibility.

Hope this is what you are looking for!

Kind regards,

LC.

Excavator · 11-03-2012, 12:44 AM

Hello surreal5335,
Your set width form blows right out of your % width containing .xml_form when you narrow the browser up.
You are not getting two columns out of this because you don't give .modal_group enough information on where to be.

Based on this simple 2-column layout, give this a try:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 80%;
	margin: 30px auto;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
.xml_form {
	width: 334px;
	margin: 10px;
	float: left;
	background: #ccc;
}
.modal_group {	
	margin: 10px 10px 10px 360px;
	background: #333;
}
</style>
</head>
<body>
    <div id="container">
        <div class="xml_form">
            <table>
                <tr>
                    <td>Input 1</td>
                    <td><input type="text" id="input_1" size="10" class="input_fields" /></td>
                </tr>
                <tr>
                    <td>Input 2</td>
                    <td><input type="text" id="input_2" size="40" class="input_fields" /></td>
                </tr>
            </table>
        <!--end .xml_form--></div>
        <div class="modal_group" > 
            <a href="#request" class="nyroModal" >
            	<div class="modal_button">Request</div>
            </a> 
        <!--end modal_group--></div>
    <!--end container--></div>
</body>
</html>

LearningCoder: Visibility is neccessary for developing a page but borders add width and that can mess up a layout. A background color works better.

LearningCoder · 11-03-2012, 12:54 AM

I'll keep that in mind thank you.

Kind regards,

LC.

surreal5335 · 11-05-2012, 09:52 PM

thanks for the reply,

to be honest I have done web design for about 3 years now and not once have I had to resort to defining a massive left margin for my second column, not once.

A much better method I have discovered which was my entire problem, I was forgetting to define a float for my .modal_group. right or left will yield desired results with appropriate differences.

Excavator · 11-05-2012, 10:47 PM

Quote:

Originally Posted by surreal5335

A much better method I have discovered which was my entire problem, I was forgetting to define a float for my .modal_group. right or left will yield desired results with appropriate differences.

Yes. Like I said.