Problem in css

HTML & CSS
1

Hello All,

below is a simple script. Here is a megacontainer that needs to contain all the divs. It is doing it if we go as per below script. But the problem comes when i add float parameter to leftbar. Megacontainer throws it out. How i can contain this inside the leftbar with float property applied to it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#megacontainer{width:100%; height:auto; border:#C03 1px solid; background-color:#0F6;clear:both;}
#leftbar{width:30%; height:auto; border:#C03 1px solid; background-color:#30C; margin-left:80px;}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>

<body>
<div id="megacontainer">
<div id="leftbar">Hello</div><!--end of leftbar-->
</div><!--end of megacontainer-->
</body>
</html>
2

I solved it… Thanks

3

Hi,

Glad you solved it but it helps if you post what your solution was so others with the same problem can be helped.:slight_smile:

The problem in your page was that you needed to contain the floats.

This can be done with many methods but onbe of the most comon is the clearfix method.


#megacontainer:after{
	content:"";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;	
}

Or the newer versions.

4

Hey Paul, I will share those from now onwards…
I only added overflow attribute to hidden and that worked.
I have a question more, is it possible to use style tags in php scripts. I tried but it didnt work.

5

You can :). Please show us your current attempt.

6

Hello,

I am fetching user picture like below from database. Everything is going fine but when i am displaying $profile_pic1 and $profile_pic3 in a box of 200*200, pic is covering only 70% of the space. I want to make it cover whole box.

// Fetch the user row from the query above
while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
	$profile_id = $row["id"];
	$avatar = $row["avatar"];
		$avatar1 = $row["avatar1"];

}

$profile_pic = '<img src="user/'.$u.'/'.$avatar.'" width="200" height="200">';
$profile_pic1 = 'user/'.$u.'/'.$avatar1;
$profile_pic3 = 'user/'.$u.'/'.$avatar;
7

Hi, there are no <style> tags there. Any chance you have a live website of this? What error codes, if any, are given? And what do you mean it “isn’t working?” Are the styles not being rendered? I doubt this is the issue, because I don’t have enough code to recreate the issue (a live page would be ideal, or at least the rendered HTML from the “View Source” will do), but when setting width and height on any HTML element like you have done (not that it’s most ideal way to do it), it’s can’t hurt to provide a unit of measurement, such as 200px, instead of just plain 200.

Please provide that raw HTML/CSS code where the image isn’t taking up the full space so we have something to work with :). Thank you. If it’s just as simple as extra space in the box, it’s likely some margin or padding in play. It couldn’t hurt to have a CSS reset in your stylesheet. It’ll potentially eliminate the issue, but if not then you can always give us the full code to work with.

8

If I am reading the code correctly, the height and width are HTML img tag attributes which are undeclared pixels and would “break” if any unit of measure at all were included within the quotes (including px).

9

I opened up W3Schools IMG test page and if I change the width/height to 420px then the height adjusts accordingly.

10

Just tried it with a local image and it behaves exactly as you said. However, the HTML validator flags the alpha characters as errors (and I’m sure that they used to cause problems.)

Browsers must be learning to be ever more tolerant of errors. :slight_smile:

Thanks, Ryan. :slight_smile:

11

It’s been a while since I’ve coded…few years…so I’m trying to remember all the little details…and having never done height=“” / width etc, it’s not something I retained. As a rule of thumb in CSS, units of measurement were always required so I assumed HTML followed the same protocol. I thank YOU for letting me know that fact :).