Extend bgcolor and keep autosuggest div visible

HTML & CSS
1

hi all

I want to extend the background color of the red strip to full width.

but also want to keep the green autosuggest div box visible.

if i add “overflow:hidden” to the “outer” div then the red strip bgcolor gets extended to full width.

but the green color gets hidden inside the red strip.

how can i extend the red strip bg color to full width and also keep the green autosuggest div visible.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0px; padding:0px;}
.outer{width:100%; clear:both; padding:0px;  background-color:#ff0000;}    
.inner{max-width:1180px; margin:0px auto; clear:both; padding:0px; width:98%}
.searchrow{clear:both; width:100%; padding:11px 0 11px 0; background-color:#ff0000; float:left;}
.search_form{width:55%; background-color:#333333; padding:0 0 0 0;}
.search_inp{background-color:#FFFFFF; color:#666666; width:80%; float:left; border:0px; padding:8px;}
.search_bt{background-color:#f3bc10; padding:.2em .2em .2em .2em; float:left; border:0px; font-size:1.3em; margin:0px; line-height:1.17em}
.autosuggest{position:absolute !important;top:42px;left:0px; z-index:99 !important; display:block; background-color:#00FF00; height:200px; width:500px;}
</style>
</head>
<body>

<div class="outer">
    <div class="inner">
    
        <div class="searchrow" style="position:relative">
            <div class="search_form">
            <form action="" method="get">
            <input type="text" class="search_inp" value="">
                    </form>
            <div class="autosuggest"></div>    
            </div>
        </div>
</div>
</div>        

</body>
</html>

vineet

2

You need to contain your floats.

e.g.

.inner:after{
	content:"";
	display:table;
	clear:both;
	height:0;
}
3

Hi PaulOB

that works great.

but why is display:table needed ?? whats its role in containing floats ??
can you explain a bit ??

also i would like to know if it can be done without :after psuedo class elements

vineet

4

It simply shims an element after the float in the html and then clears it (almost in the exact same way had you placed an empty div after the float and applied clear:both to it). It’s commonly called the clearfix method.

I used display:table as elements with his propery don’t suffer from margin collapse so the method above also contains margins. You could use display:block instead of table if you wanted older than IE8 support.

You can read all about it here. :slight_smile:

Yes it can be done depending on context. You can use a property that creates a new block-formatting context and in this context child floats are automatically contained.

Of course the property you add may have side effects or change wanted behaviours so you need to understand what you are doing. The simplest solution is to add overflow:hidden to the container that has floated children and this will contain the floats automatically but of course if you need visible overflow (a drop down or pop up for example) then this method is no good.

You could set the parent element to be display:table and this would automatically contain child floats but then changes the behaviour of the element to act like a table which may or may not affect the workings of the page.

There is no one answer for every case and whether you use clearfix, overflow or some other method you should understand what they are all doing in heir own special way :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.