How to set inner div width and height to outer div and also center of window with responsive?

Question

2.00/5 (1 vote)

See more:

<div name="outer" style='background-color:red; '>
       <div name="inner"style='background-color:yellow; '>

       some content<br>
       some content<br>
       some content<br>
       some content<br>
       some content<br>


        </div>
</div>

Note: inner div not set width and height static. inner div content bind dynamically from database so in database admin set width and height.this width and height fix to outer div. and also div must be show on center of window with responsive

thanks

Posted 1-Sep-15 21:08pm

Member 11384516

Updated 25-Sep-17 3:19am

v4

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Member 10371622 · Answer 1 · 2015-09-01T21:38:00

Solution 2

If you want that inner div covers the whole width and height of your outer div, set width and height of your inner div to 100% like this

HTML

<div style="width:100%; height:100%"></div>

Posted 1-Sep-15 21:38pm

Member 10371622

Comments

Member 11384516 2-Sep-15 3:40am

if i set like that means div not center of window see

http://jsfiddle.net/yPMVJ/61/

Member 10371622 2-Sep-15 3:46am

you want this ?
http://jsfiddle.net/yPMVJ/63/

Member 11384516 2-Sep-15 3:48am

yes i want like that but no need to show red color as well as bottom and top not center of page remember don't set static bottom and top value

Member 10371622 2-Sep-15 3:54am

If you don't want to show red color, simply remove the color of outer div.
what's the problem ?

Member 11384516 2-Sep-15 4:00am

ok i will set. but top and bottom div not center see.
http://jsfiddle.net/yPMVJ/69/

Member 11384516 2-Sep-15 4:06am

friend see below link fancybox pic show on responsive near by facebook like icon above pic.

http://www.jqueryscript.net/lightbox/Easy-jQuery-Lightbox-Plugin-For-Image-Gallery-ion-zoom.html.
after clicked pic adject window

Member 11384516 2-Sep-15 3:52am

static value means top:25%; widht:28%; because content static means we ill set like that but here content dynamic.

Peter Leow · Answer 2 · 2015-09-01T22:23:00

Try this:

XML

<!DOCTYPE html>
<html>
<head>
<style>
#inner {
    background-color: yellow;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
</style>
</head>
<body>
<div name="outer" id="outer">
       <div name="inner" id="inner" style="width:250px; height:350px">
       put your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents
put your contents here
        </div>
</div>
</body>
</html>

As for adding responsiveness, read my article From Indifferent to Responsive Web Design[^]

jaket-cp · Answer 3 · 2015-09-01T22:25:00

If I get what you are asking and you want the outer div to fill up the whole window and the inner div to be in the center of the outer div.
You could try something like this (Testing in Chrome):

CSS

/*css*/
html, body {
    height:100%
}
.outer {
    background-color: red;
    height:100%;
}
.inner {
    background-color: yellow;
    position:relative;
    top:50%;
    width:50%;
    transform:translateY(-50%);
    margin: auto auto auto auto;
}

HTML

<!--html-->
<div name="outer" class="outer">
    <div name="inner" class="inner">put your contents here ...</div>
</div>

You can remove the background-color, they are only for show.
Here is the fiddle:http://jsfiddle.net/yPMVJ/71/[^]

Here is the link to the vertical align technique: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/[^]

Member 10371622 · Answer 4 · 2015-09-01T21:24:00

Solution 1

I didn't understand the meaning of this line
"How to set inner div width and height to outer div"

If you want to set position of your div center to your screen just set the style like this

HTML

<div style="margin: 0 auto"></div>

Posted 1-Sep-15 21:24pm

Member 10371622

Comments

Member 11384516 2-Sep-15 3:29am

hi there,
it mean inner div width:250px; height:350px means this width and height also affect to outer div

please see http://jsfiddle.net/yPMVJ/49/ this link i want show only yellow div

Member 10371622 2-Sep-15 3:32am

What you want to do ?

Member 11384516 2-Sep-15 3:35am

i want show div center on page with responsive like fancybox

Member 11384516 2-Sep-15 3:38am

how can do this task? this is my question.because div content append from database html code. i did not set property static. one content small other more content.

Member 11384516 2-Sep-15 3:38am

how can do this task? this is my question.because div content append from database html code. i did not set property static. one content small other more content.

How to set inner div width and height to outer div and also center of window with responsive?

4 solutions

Solution 2

Solution 3

Solution 4

Solution 1

Add your solution here

Preview 0