Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    problem getting two column layout

    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

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    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.
    Last edited by LearningCoder; 11-03-2012 at 12:21 AM. Reason: added information.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    I'll keep that in mind thank you.

    Kind regards,

    LC.

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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.
    Last edited by surreal5335; 11-05-2012 at 09:57 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by surreal5335 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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