Home/ Questions/Q 6757403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:38:50+00:00

I’m having a problem with setting the height of <div> tags using CSS. I’m

  • 0

I’m having a problem with setting the height of <div> tags using CSS.

I’m using the following CSS & HTML code.

    <!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 charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
div
{
display:block;
}

#ph_container
{
margin:0 auto;
width:980px;
height:auto;
border: 1px solid  #00CC33;
clear:both;
background: #F0F0F0;
}

#cp_search
{
height:100px;
clear:both;
margin:10px 0px 0px 0px;
border: 1px solid #0099FF;
}

#cp_search_ex
{
clear:both;
background:none;
margin-top:5px;
margin-left:27px;

}
#cp_search_tx
{
width:210px;
float:left; /*try here whitout float and see the difference that I want to get*/
margin:0px;
background:none;
}

.txtx
{
color: #000000;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
</style>
<body>

<div id="ph_container" class="space">
     <div id="cp_search">
        <div id="cp_search_ex" class="space"> 
          <div id="cp_search_tx" class="txtx" >SEARCH</div>
        </div>
      </div>
</div>

</body>
</html>

My problem is that the parent div id="cp_search_ex" doesn’t get the height of the div id="cp_search_tx" which is inside it, it has the height: 0px.

I want the div id="cp_search_ex" to take the height from the div id="cp_search_tx"?

I wrote a comment in the CSS code please follow.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use a clearfix method. I usually use 

    .clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

    Apply the class clearfix to ph_container and see if that fixes it.

    • 0