-5

I have two div :

<div class="Content">
          <h1>Hello World !</h1
                 <div class="POST">
                      My Post ......
                  </div>

</div>

CSS (Content ) :

.Content
{

    position:absolute;
    left: 50%;
    margin-left:-220px;
    top: 165px;
    width:707px;
}

CSS (POST) :

.Post
{
    position:absolute;
    top:404px;
    width: 669px;
    left: 23px; 
}

i want a css code like that when <div class="content"> increses, other <div class="parent"> height increses so

5
  • 1
    If you don't set a size to class="content" then it will automatically size to fit the children so long as their positions are not set to absolute or fixed
    – Adjit
    May 14, 2014 at 13:31
  • 1
    First of all you have to close your h1 tag
    – laaposto
    May 14, 2014 at 13:31
  • You arent showing enough HTML here, where is the parent element? Also, do you have any CSS applied?
    – SW4
    May 14, 2014 at 13:34
  • I want a css code.!!!!!!!!!!!!!!!!!!!!! May 14, 2014 at 13:41
  • 1
    ...and why so much position:absolute? It's a horrible way to do layout.
    – Paulie_D
    May 14, 2014 at 13:53

2 Answers 2

0

here you go:

html:

<div class="Content">
     <h1>Hello World !</h1>
           <div class="POST">
           My Post ......
    </div>

</div>

css:

 .POST
    {
        width: 200px;
        height:100%;
        background:red;
    }

.Content
{
    background:blue;
    height:100px;
    width:200px;
}

http://jsfiddle.net/zaHAL/

Please, also learn how to write code...

-1

Use this:

HTML

<div class="Content">
          <h1>Hello World !</h1>
                 <div class="Post">
                      My Post ......<br>
                     sdfasfasdadfasfdasfdasdf<br>
                     asfasfa<br>
                        sdfasfasdadfasfdasfdasdf<br>
                     asfasfa<br>
                        sdfasfasdadfasfdasfdasdf<br>
                     asfasfa<br>
                        sdfasfasdadfasfdasfdasdf<br>
                     asfasfa<br>
                  </div>

</div>

CSS:

.Content
{
    top: 165px;
    left: 50%;    
    width:100%;
    border:1px solid black;
}
.Post
{
    top:404px;
    width: 50%;
    height:100%;
    left: 23px; 
    border:1px solid black;
}
4
  • BR is there just to show that if the height of the child div increase then the height of the parent div will increse as well. He by no means have to use br. I think thats what he is asking for. May 14, 2014 at 14:54
  • <p> is another option but then you will need a closing tag as well. However, <br> is just one peace of code that shows the trick. Anyways, he did not ask for which tags to use to break lines. He asked for the solution to increase the height of the parent div when child div increases, and that is shown in this solution perfectly. May 15, 2014 at 13:09
  • yes but br is a dirty way to do the trick. Using <p> is much 'cleaner'. As your solution for his problem is written here perfectly, mine is as well. But doesn't use br and neither an <p> I know that. But it was the HTML of the poster, and his question had to do with CSS code. Not with HTML, so I left the HTML alone.
    – Drogon
    May 15, 2014 at 14:23
  • your solution has a fixed height:100px; on the parent div. This means that if the content in the child div exceeds that amount it will start overflowing. I don't think poster wants that. no one voted your answer as negative. May 15, 2014 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.