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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    left and right div inside a container div

    can i get CSS code for left and right div in a container. And several left right div below.i Know I asked this question before but I did not catch on to the CSS cODE.

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    45
    Thanks
    0
    Thanked 3 Times in 3 Posts
    This what you are looking for? ...

    Code:
    <style type="text/css">
    #wrapper {width: 500px; float: left;}
    #column-a {width: 250px; float: left;}
    #column-b {width: 250px; float: left;}
    </style>
    
    <div id="wrapper">
    <div id="column-a">Content</div>
    <div id="column-b">Content</div>
    </div>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello rleahong,
    michaelbt2's snippet works fine in modern browsers that have all but done away with the odd box model bug. You may or may not have need of something that is not so set in it's widths.

    Have a look at a simple 2-column layout that can be very fluid.
    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
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cannot position container at a level below the top of the page. Can several containers
    be used one below the other with left and right inner div. The left and right inner div are not aligned


    <style>
    #CONTAINER{
    float :left;
    width :100%
    }
    #PRODUCT_ADDITION_TOP_LEFT{
    background-color:#FFCCC;
    height : 500px;
    float : left;
    top : 440px;
    width : 50%;
    }
    #PRODUCT_ADDITION_TOP_RIGHT{
    background-color:#FFCCC;
    height : 400px;
    float : left;
    width : 50%;
    top : 440px;

    }
    </style>
    ?>
    <div id="CONTAINER">
    <DIV ID="PRODUCT_ADDITION_TOP_LEFT">
    <?php
    if ($_SESSION['FILENAME'] == "PRODUCT" ) {

    ?>
    <TABLE>
    <TR>
    <TD>
    <TABLE BGCOLOR="RED" BORDER="10" WIDTH="400">
    <TR>
    <TD COLSPAN="4"> </TD>
    <TD ALIGN="CENTER"><FONT FACE="ALGERIAN" SIZE="30" COLOR="YELLOW">SEARCH MUSIC</FONT></TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>

    <TABLE BORDER="10" WIDTH="40%">
    <TR>
    <TD>
    <FORM METHOD="POST" ACTION="<?php $PHPURL ?>">
    <TABLE BORDER="10" BGCOLOR="RED" WIDTH="350">
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="ARTIST"><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Artist</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="GREEN"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="GROUP"><B><FONT FACE="ALGERIAN" COLOR="YELLOW" SIZE="5">By Group</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE='LABEL'><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Label</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="GREEN"> <INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE='FORMAT'><B><FONT FACE="ALGERIAN" COLOR="YELLOW" SIZE="5">By Format</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="SONG"><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Song Title</FONT</B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="GREEN"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="RYTHM"><B><FONT FACE="ALGERIAN" COLOR="YELLOW" SIZE="5">By Rythm</FONT</B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="ALBUM"><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Album</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="SUBMIT" VALUE="Search"></TD>
    </FORM>
    </TR>
    </TABLE>


    <?php

    }
    ?>
    </DIV>

    <DIV ID="PRODUCT_ADDITION_TOP_RIGHT">
    <?php
    if ($_SESSION['FILENAME'] == "PRODUCT" ) {

    if ($_SESSION['SEARCHBY'] == "LABEL") {
    MANAGE_LABEL();
    }
    if ($_SESSION['SEARCHBY'] == "RYTHM") {
    MANAGE_RYTHM();

    }
    if ($_SESSION['SEARCHBY'] == "GROUP") {
    MANAGE_GROUP();
    }


    }
    ?>
    </DIV>
    </DIV>
    Last edited by rleahong; 04-04-2013 at 06:31 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by rleahong View Post
    cannot position container at a level below the top of the page.
    Is that a question?

    Can several containers
    be used one below the other with left and right inner div.
    Yes, you can style them all the same from your CSS with a class instead of an id.

    The left and right inner div are not aligned
    Not a clue what you're looking at.
    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

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Do you have a link? Or code you could paste here?

    It is not clear what you want. For example, unless you do something, all containers are below the top of the page.

    Yes, you can have containers stacked and they can have internal divisions:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
    	position:relative;
    	width:100%;
    	background-color:yellow;
    	margin-bottom: 10px;
    }
    
    div div {
    	float: left;
    	width: 45%;
    	background-color:red;
    }
    
    #outDiv1b, #outDiv2b {
    	background-color:blue;
    }
    </style>
    </head>
    
    <body>
    <div id="outDiv1">
    	<div id="outDiv1a">out div 1a</div>
    	<div id="outDiv1b">out div 1b</div>
    </div>
    
    <div id outDiv2">
    	<div id="outDiv2a">out div 2a</div>
    	<div id="outDiv2b">out div 2b</div>
    </div>
    
    </body>
    </html>
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #7
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i cannot position container div vertically down the page. can I include
    #container{
    top : 500px
    position: absolute
    float : left
    width : 100%
    }

    what I want to show to the right is a list of labels , groups or rythms in a music website.
    the right div is not aligning properly.it is place below the left div.
    can you give an example of how to style several containers by class.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You are mixing positioning and float. It's either or.
    In this bit, the positioning does not work -
    Code:
    #PRODUCT_ADDITION_TOP_LEFT{
    background-color:#FFCCC;
    height : 500px;
    float : left;
    top : 440px;
    width : 50%;
    }
    In this bit, nothing will work because it's invalid with each line being closed with a ; ...once you close them, the float is canceled by the positioning. Even then, you wouldn't see anything if there was no content to expand that element. -
    Code:
    	#container{
    top : 500px
    position: absolute
    float : left
    width : 100%
    }
    Have a look at the links about validating in my signature line. You can validate both your CSS and your markup. Also, you need to check out the link about tables as well.


    .
    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

  • #9
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by rleahong View Post
    can i get CSS code for left and right div in a container. And several left right div below
    Code:
            <style type="text/css">
                #container{
                    width: 600px;
                    margin: 20px auto 0px auto;
                    overflow: hidden;
                    border: 1px solid red;
                }
                .leftDiv {
                    border: 1px solid blue;
                    width: 40%;
                    float: left;
                }
                .rightDiv {
                    border: 1px solid blue;
                    width: 40%;
                    float: right;
                }
            </style>
    Code:
    <div id="container">
                <div class="leftDiv">LEFT DIV</div>
                <div class="rightDiv">RIGHT DIV</div>
                <div class="leftDiv">LEFT DIV</div>
                <div class="rightDiv">RIGHT DIV</div>
            </div>

  • #10
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cannot position container vertically without
    top : 450;
    position : absolute

    change inner div to have class properties. still not align
    the right div is now aligned to the right but below the left div
    <script>
    #CONTAINER{
    top : 450px;
    position:absolute;
    width :9000px;
    }
    .PRODUCT_ADDITION_TOP_LEFT{
    background-color:#FFCCC;
    height : 200px;
    float : left;
    top : 440px;
    width : 50%;
    }
    .PRODUCT_ADDITION_TOP_RIGHT{
    background-color:#FFCCC;
    height : 200px;
    float : left;
    width : 50%;
    top : 440px;

    }
    </script>


    <div id="CONTAINER">
    <DIV CLASS="PRODUCT_ADDITION_TOP_LEFT">
    <?php
    if ($_SESSION['FILENAME'] == "PRODUCT" ) {
    if ( $_SESSION['COMMAND'] == "ADD" ) {
    ?>
    <TABLE>
    <TR>
    <TD>
    <TABLE BGCOLOR="RED" BORDER="10" WIDTH="400">
    <TR>
    <TD COLSPAN="4"> </TD>
    <TD ALIGN="CENTER"><FONT FACE="ALGERIAN" SIZE="30" COLOR="YELLOW">SEARCH MUSIC</FONT></TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>

    <TABLE BORDER="10" WIDTH="40%">
    <TR>
    <TD>
    <FORM METHOD="POST" ACTION="<?php $PHPURL ?>">
    <TABLE BORDER="10" BGCOLOR="RED" WIDTH="350">
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="ARTIST"><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Artist</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="GREEN"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="GROUP"><B><FONT FACE="ALGERIAN" COLOR="YELLOW" SIZE="5">By Group</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE='LABEL'><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Label</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="GREEN"> <INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE='FORMAT'><B><FONT FACE="ALGERIAN" COLOR="YELLOW" SIZE="5">By Format</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="SONG"><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Song Title</FONT</B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="GREEN"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="RYTHM"><B><FONT FACE="ALGERIAN" COLOR="YELLOW" SIZE="5">By Rythm</FONT</B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="RADIO" NAME="SEARCHBY" VALUE="ALBUM"><B><FONT FACE="ALGERIAN" COLOR="GREEN" SIZE="5">By Album</FONT></B></TD>
    </TR>
    <TR>
    <TD BGCOLOR="YELLOW"><INPUT TYPE="SUBMIT" VALUE="Search"></TD>
    </FORM>
    </TR>
    </TABLE>


    <?php
    }
    }
    ?>
    </DIV>

    <DIV CLASS="PRODUCT_ADDITION_TOP_RIGHT">
    <?php
    if ($_SESSION['FILENAME'] == "PRODUCT" ) {
    if ( $_SESSION['COMMAND'] == "ADD" ) {
    if ($_SESSION['SEARCHBY'] == "LABEL") {
    MANAGE_LABEL();
    }
    if ($_SESSION['SEARCHBY']
    MANAGE_RYTHM();

    }
    if ($_SESSION['SEARCHBY'] == "GROUP") {
    MANAGE_GROUP();
    }
    }

    }
    ?>
    </DIV>
    </DIV>
    Last edited by rleahong; 04-09-2013 at 04:09 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by rleahong View Post
    cannot position container vertically without
    top : 450;
    position : absolute

    change inner div to have class properties. still not align
    the right div is now aligned to the right but below the left div
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.


    You can use margin to make that gap at the top. Your example won't work because the browser needs you to tell it 450 what. Without a px, em or some unit of measurement it doesn't know what to do.
    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

  • #12
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you tell me in my code where and how to use the margin

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by rleahong View Post
    can you tell me in my code where and how to use the margin
    It would just be a top margin on your #container. Since you're centering that element it might look something like this -
    Code:
    #container {
    width: 800px;
    margin: 450px auto 0;
    }
    I'm really wondering what you're not telling us though. Why the 450px gap there?
    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

  • #14
    New Coder
    Join Date
    Jul 2010
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the margin only dropped the container further down the page. it did not bring
    the right inner div up to be side by side with the left div.

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by rleahong View Post
    the margin only dropped the container further down the page. it did not bring
    the right inner div up to be side by side with the left div.
    Margin and padding, done in shorthand like that, read clockwise starting from the top. It goes top,right,bottom,left. When I wrote margin: 450px auto 0; It put margins at top:450px right:auto bottom:0 and left:auto, ...so that would move the container further down the page.

    For putting elements side by side you would float one or both. Have a look at this demo.
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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