How to I make div length changes as needed?

Question

0.00/5 (No votes)

See more:

I want to make a div with a length changable according to search results using a loop, but it looks like the css can't see the php loop because the length of the div still unchanged, this is the php code

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="Styles\style.css"/>
    <title>iFound</title>
    
</head>
<body dir="rtl">
<div id="MainDiv">
    <div id="Headin"></div>
    <div id="Nav"></div>
    <?php
    for($i=0;$i<9;$i++)
    {
        echo "<div class=\"divs\"><div class=\"indivs\"></div><div class=\"intxtdivs\"></div></div>";
    }

    ?>
    <div id="footer"></div>
</div>
</body>
</html>

CSS code

CSS

body{
    padding:0;
    margin: 0;
    background-color: #3778a1;
}
#MainDiv{
    background-color: white;
    margin-left: auto;margin-right: auto;margin-top: 5px;
    width: 1000px;
    min-height: 500px;

}
#headin{
    top: 0;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid black;
}
#nav{
    width: 100%;
    height: 49px;
    border-bottom: 1px solid black;
}
.divs{
    width: 298px;
    height: 298px;
    border: 1px solid black;
    margin-right: 26px;margin-top: 50px;
    float: right;
}
.indivs{
    width: 290px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: yellow;
}
.intxtdivs{

     width: 290px;
     height: 60px;
     margin-left: auto;margin-right: auto;
     position: relative;bottom: 0;
     background-color: aqua;
 }
#footer{

    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: black;
}

https://s14.postimg.org/vrktds0xt/111.jpg[^]
what should i do?

What I have tried:

I tried to set the length auto and 100% but it is useless!

Posted 6-Sep-16 23:24pm

Salah Abualrob

Updated 7-Sep-16 8:31am

Add a Solution

Comments

David_Wimbley 7-Sep-16 12:31pm

are you trying to shove every div on one line/row? or make all the divs equal width and auto adjust how many appear on each line/row? Or is it 1 div per row/line?

Salah Abualrob 8-Sep-16 5:28am

my problem is with the main div, suppose it's default height when there is no divs is 100px, when i add a new div, mainDiv height must increase 250px per row (each row has 3 divs), got it?

1 solution

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)

W∴ Balboos, *GHB* · Answer 1 · 2016-09-07T08:31:00

Solution 1

<div>'s have height and width, not length. Here is an example of a <div> that has a fixed width and a height that auto-adjusts based upon the content, which are text quotations of various lengths.

HTML

<div id="id01" style="width:300px;min-height:300px;padding:5px 5px 20px 5px;background-color:#ddd;box-shadow:3px 3px 8px #000 inset,-5px -5px 8px #000 inset"></div>

Note that there's a minimum height - An esthetic adjustment.

This should get you on your way.

Posted 7-Sep-16 8:31am

W∴ Balboos, GHB

Comments

Salah Abualrob 8-Sep-16 5:46am

my problem is with the main div, suppose it's default height when there is no divs is 100px, when i add a new div, mainDiv height must increase 250px per row (each row has 3 divs), got it?

W∴ Balboos, GHB 8-Sep-16 8:16am

First, instead of giving the empty div a fixed height, give it a minimum height (as in the example in my answer). A "height:100px" fixes the height at 100px but a minimum height lets it expand.

When you "add a new div" - inside the other? Before it? After It? One inside another? You must be specific!

If you're putting div's inside your original, it will expand to fit them - unless you fix the height, which is what you're saying you're doing.

Salah Abualrob 8-Sep-16 13:58pm

yes sure inside the mainDiv, all divs are inside the mainDiv
i tried to use min-height, but when the javascript code generates the divs, the height of the mainDiv does not change!