What is the error in these two styles

HTML & CSS
1

Hello here is my script that fetches data from database and gives the result as pic attached.

<style>
.outer{margin:auto;;margin-top:15%; margin-left:18%; width:90%; }
</style>

<?php
$sql = "SELECT * FROM users WHERE gender='$sexlog' AND activated='1'";
$user_query = mysqli_query($db_conx, $sql);
while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC))
{
	$username=$row["username"];
	$avatar = $row["avatar"];
	$genderu=$row["gender"];
	$data = $username.'<br/>';
    $profile_picnew = '<a href="expressinterest.php?u='.$username.'"><img src="user/'.$username.'/'.$avatar.'" height="160" width="200"></a>';
if($avatar == NULL){
if($genderu == "f"){
	$profile_picnew = '<a href="expressinterest.php?u='.$username.'"><img src="css/images/girl.gif" height="160" width="200"></a>';
}
else {	$profile_picnew = '<a href="expressinterest.php?u='.$username.'"><img src="css/images/boy.gif" height="160" width="200"></a>';
}
echo '<div class="outer"><div style="float:left; margin-left:3%; border:1px solid silver;">'.$profile_picnew.''.$data.' </div><div>';
}}
?>

result–
Source code:-
<div class=“outer”><div style="float:left; margin-left:3%; border:1px solid silver; "><a href=“expressinterest.php?u=sonam”><img src=“css/images/girl.gif” height=“160” width=“200”></a>sonam<br/> </div><div><div class=“outer”><div style="float:left; margin-left:3%; border:1px solid silver; "><a href=“expressinterest.php?u=aishwariya”><img src=“css/images/girl.gif” height=“160” width=“200”></a>aishwariya<br/> </div><div><div class=“outer”><div style="float:left; margin-left:3%; border:1px solid silver; "><a href=“expressinterest.php?u=meena”><img src=“css/images/girl.gif” height=“160” width=“200”></a>meena<br/> </div><div>
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>Mycrush-shail</title>
<style>
.outer{margin:auto;;margin-top:15%; margin-left:18%; width:90%; }
</style>
</head>
<body>
<div></div>
</body>
</html>

when i made the change in above query like this,then result become distorted like pic2. WHy>

<style>
.outer{margin:auto;;margin-top:15%; margin-left:18%; width:90%;border:1px solid green; overflow: hidden; }
</style>

resullt-

Source code-
<div class=“outer”><div style="float:left; margin-left:3%; border:1px solid silver; "><a href=“expressinterest.php?u=sonam”><img src=“css/images/girl.gif” height=“160” width=“200”></a>sonam<br/> </div><div><div class=“outer”><div style="float:left; margin-left:3%; border:1px solid silver; "><a href=“expressinterest.php?u=aishwariya”><img src=“css/images/girl.gif” height=“160” width=“200”></a>aishwariya<br/> </div><div><div class=“outer”><div style="float:left; margin-left:3%; border:1px solid silver; "><a href=“expressinterest.php?u=meena”><img src=“css/images/girl.gif” height=“160” width=“200”></a>meena<br/> </div><div>
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>Mycrush-shail</title>
<style>
.outer{margin:auto;;margin-top:15%; margin-left:18%; width:90%;border:1px solid green; overflow: hidden; }
</style>
</head>
<body>
<div></div>
</body>
</html>

i want the result like pic 1 but showing the border in div outer also.

2

shail.arya,

I have not read your previous posts so I am not familiar with your level of HTML experience. It looks like you can write PHP, but you may not understand how to write HTML.

First, a request. When you post HTML and CSS code, please create a working page, starts with doctype and ends with </html>, and put it between [noparse]

 ...

[/noparse] tags so it can be read and copied easily. Click the “#” symbol in the message box to add code tags to your post.

I took the code from your post and rewrote it with indents so the structure of the page would be easily visible. This is what I find:
(This is a working page. You can copy it into a new file and open it in your browser. It should look exactly like your first example.)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mycrush-shail</title>
<style>
.outer {margin:auto;;margin-top:15%; margin-left:18%; width:90%;}
</style>
</head>
<body>

<div>
    <div class="outer">
        <div style="float:left; margin-left:3%; border:1px solid silver; ">
            <a href="expressinterest.php?u=sonam">
                <img src="css/images/girl.gif" height="160" width="200">
            </a>
            sonam<br/>
        </div>
        <div>
            <div class="outer">
                <div style="float:left; margin-left:3%; border:1px solid silver; ">
                    <a href="expressinterest.php?u=aishwariya">
                        <img src="css/images/girl.gif" height="160" width="200">
                    </a>
                    aishwariya<br/>
                </div>
                <div>
                    <div class="outer">
                        <div style="float:left; margin-left:3%; border:1px solid silver; ">
                            <a href="expressinterest.php?u=meena">
                                <img src="css/images/girl.gif" height="160" width="200">
                            </a>
                            meena<br/>
                        </div>
                        <div>
</div>

</body>
</html>

If you are familiar with HTML, you should recognize that the structure is not workable. The HTML validator indicates 10 errors, 6 of which are missing close tags.

If you add {border:1px solid green; overflow:hidden;} to the CSS assigned to .outer, the resulting page will look like your second example.

I rewrote the HTML to the extent to fix the major errors. I assigned the image boxes a class, .crushbox, and moved their CSS to the top of the page so I could color the border RED instead of silver.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mycrush-shail</title>
<style>
.outer {
    margin:auto;
    margin-top:15%;
    margin-left:18%;
    width:90%;
    border:1px solid green;
    overflow:hidden;
}
.crushbox {
    float:left;
    margin-left:3%;
    border:1px solid red;
}
</style>
</head>
<body>

<div>
    <div class="outer">
        <div class="crushbox">
            <a href="expressinterest.php?u=sonam">
                <img src="css/images/girl.gif" height="160" width="200">
            </a>
            sonam<br/>
        </div>
        <div class="crushbox">
            <a href="expressinterest.php?u=aishwariya">
                <img src="css/images/girl.gif" height="160" width="200">
            </a>
            aishwariya<br/>
        </div>
        <div class="crushbox">
            <a href="expressinterest.php?u=meena">
                <img src="css/images/girl.gif" height="160" width="200">
            </a>
            meena<br/>
        </div>
    </div>
</div>

</body>
</html>

Please compare this HTML to the HTML above. All I did was remove unnecessary tags and add {border:1px solid green; overflow:hidden;} to the CSS. If you copy this code into a new file and open it in your browser, it should resemble the layout in your first example.

FYI: the validator expects image to have an “alt” attribute.

To answer your question about the layout:
floated objects are removed from the normal flow of the page. They have no intrinsic height. The parent container holding floated boxes needs to be “cleared” so it will recognize and “contain” the floats. When you added “overflow:hidden”, it did just that, but because the structure of your code is broken, you wound up with .outer boxes inside of .outer boxes. and the stacked layout in your second example. The revised code only has one .outer box. The image containers are inside of that box.

Rewrite your PHP to generate well-structured, valid HTML and this example should meet your expectations.

The values assigned to the margins, etc, are kinda odd, so I expect we’ll hear from you again soon :slight_smile:

Cheers

3

If this is on a live site we can more easily give you an answer. Is this live?