design with div in html

Question

1.00/5 (1 vote)

See more:

XML

<div style="top:10%;left:0%;background-color:red;width:20%;bottom:0%;position:absolute"></div>
    <div style="top:10%;left:20%;background-color:blue;width:80%;bottom:0%;position:absolute"></div>

this code works which I want.

but I want the whole thing inside a div(say,'midDiv').Then How to write the code?Actually I want,when I change the position of the 'midDiv',the inside design will be same with respect to the position.

Actually,when we set position='absolute',I think the position is set with respect to
the whole page.But I want to set left,right,bottom,etc position of the two divs(explained above) with respect to the div 'midDiv' as I want to put the two divs inside 'midDiv'.
If my problem is not understood even now please make me know.

Posted 23-Nov-12 8:53am

souvikcode

Updated 24-Nov-12 4:06am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 23-Nov-12 14:58pm

Not clear. What whole thing? And embedding style in HTML elements is evil.
--SA

shahzads 23-Nov-12 15:04pm

I am not able to understand your question. Please explain more clearly..

Bhushan Shah1988 23-Nov-12 23:32pm

Please explain clearly..

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jitendra2005 · Answer 1 · 2012-11-24T04:47:00

If I understood your problem correctly, then below code will work for you.

Style:

CSS

<style type="text/css" media="screen">
#midDiv
{
    position: relative;
    border: 1px solid #ccc;
    width: 500px;
    height: 250px;
    top: 100px;
    left: 200px;
}
#div1
{
    top:10%;
    left:0%;
    background-color:
    red;
    width:20%;
    bottom:0%;
    position: relative;
}
#div2
{
    top:10%;
    left:20%;
    background-color:
    blue;
    width:80%;
    bottom:0%;
    position: absolute;
}

HTML:

XML

<div id="midDiv">
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
</div>

Also I suggest not to use inline style as it is bad coding practice.
Happy Coding!

design with div in html

1 solution

Solution 1

Add your solution here

Preview 0

design with div in html

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us