CODEWITHSUNDEEP
csshtml
shahab
shahab

Reputation: 1

display three div tag in one parent div tag

i want to display three div tag in a parent div tag parent div has no width and height one inner div will be on left side with fixed width and height 2nd inner div will be in center with fixed height only and its width is between two other div tags 3rd inner div will be on right side 

 css
   #container{}
 #columnright{

    float:left;
    width:200px;
    height: 400px;
 }    
 #content{
    margin-right:auto;
    margin-left:auto;
    height: 400px;
    }
 #columnleft{

    float:right;
    width:150px;
    height: 400px;
    }

 html
  <div id="container">
   <div id="columnright"></div>
   <div id="content"></div>
   <div id="columnleft"> </div>
  </div>

Upvotes: 0

Views: 91

Answers (5)

Howard Renollet
Howard Renollet

Reputation: 4739

http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/

If I understand you correctly, you're looking for something like this:

<head>
    <title></title>
    <script>
    </script>
    <style>
        #parent{
            width:100%;
        }
        #columnleft{
            position:relative;
            float:left;
            border: 1px solid black;
            top:0px;
            width:150px;
            height: 400px;
        }
        #content{
            position:relative;
            width:100%;
            top:0px;
            padding: 20px;
            margin-left:150px;
            margin-right:200px;
        }
        #columnright{
            border: 1px solid black;
            float:right;
            top:0px;
            width:200px;
            height: 400px;
        }
    </style>
</head>
<body>
  <div id="parent">
   <div id="columnleft"></div>
   <div id="columnright"></div>
   <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus sem, lobortis fermentum eleifend non, interdum at orci. Ut nec mauris vulputate, eleifend elit vitae, suscipit felis. Etiam leo ligula, pellentesque non urna sed, sagittis hendrerit nibh. Sed pharetra pellentesque nunc vitae imperdiet. orci. Nam ac nisi sed ipsum ullamcorper aliquet eget lobortis enim. Duis consequat sed arcu vel vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis porttitor sapien. Duis a sodales justo. Mauris gravida aliquet nunc in scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sagittis, dapibus quam eu, congue magna.</div>
  </div>
</body>

You'll need to set your margin-left and margin-right of your content container to the widths of your left and right columns.

Upvotes: 0

Tim S
Tim S

Reputation: 2329

This accomplishes what you're trying to do without floating anything. I also corrected your #columnright to actually be on the right side and your #columnleft to actually be on the left side. And I added background color to better illustrate what's going on.

HTML

<div id="container">
    <div id="columnright"></div>
    <div id="content"></div>
    <div id="columnleft"> </div>
</div>

CSS

#container {
    position:relative;
    background-color:#E0E0E0;
}

#columnleft {
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height: 400px;
    background-color:#CCCCE0;
}

#columnright {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height: 400px;
    background-color:#E0CCCC;
}    

#content {
    margin-right:200px;
    margin-left:150px;
    height: 400px;
    background-color:#CCE0CC;
}

Fiddle

http://jsfiddle.net/mNnAq/

Upvotes: 0

T3 H40
T3 H40

Reputation: 2436

You need to youse CSS3's calc() function to calculate the width of your content div. See here:

JSFiddle

I also colored the divs for easier understanding. You should probably also remain your div's, because at the time your "columnright" is on the left hand side of the screen and vice versa.

Upvotes: 0

Ravi Teja
Ravi Teja

Reputation: 350

 <style>

             #columnright
            {
                width: 200px;  
                height:400px;
    }

    #content
    {
    float: left;
    height: 400px;
    }

    #columnleft
    {
    float: right;
    width: 150px;
    height: 400px;
    }
</style>

<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"></div>
</div>

I think the above code can help you. In the first inner div, no need to right float : left. Becoz u told that it must have fixed width and height. If u mention float property, it doesn't occupy the space.

Upvotes: 1

w3b
w3b

Reputation: 853

<style>
#columnright{


    width:200px;
float:left;

 }    
 #content{

    width:200px;
float:left;


    }
 #columnleft{

float:left;
    width:150px;

    }

</style >
  <div id="container">
   <div id="columnright">hi</div>
   <div id="content">hello</div>
   <div id="columnleft">how</div>
  </div>

Upvotes: 1

Related Questions