text disappears

Forum Moderators: not2easy

Message Too Old, No Replies

text disappears

raydona

2:57 pm on Nov 1, 2011 (gmt 0)

Hi,
I have an outer div {width:71.08em; height:4.38em;}. Inside it I have placed a smaller div {width:19em; height:4.22em;} This inner div contains an image link and text links. The inner div naturally floats to the left of the outer div. What I want to do is place text to the right of the outer div, using something like #outerdiv h1. When I place the text it disappears. If I comment out the inner div the text appears. I have used text-align:right; and float:right; inside #outerdiv h1 but nothing seems to make the text appear. I have also used margin and padding to try and make the text appear but nothing seems to work. I wonder if someone could point out what is going wrong. I would be grateful for all suggestions.

Paul_o_b

6:08 pm on Nov 1, 2011 (gmt 0)

You'd need to float the first smaller div because floats must come first and your following content starts underneath even if you float it.

Then float the other content to the right and it should show ok.

Is there a reason for the heights? If you are holding fluid text content then let the content dictate the height instead.

If you don't need the heights then the main outer will need a clearing mechanism such as adding overflow:hidden or the "clearfix" technique in order to contain the floats.

raydona

2:46 pm on Nov 17, 2011 (gmt 0)

Hi Paul_o_b,
Many thanks for the reply. Sorry I couldn't thank you earlier, was busy with another project. I took your advice and removed the heights so that content dictated the height. However, if I floated h1 to the right a gap appeared between the outer div and the div immediately below it (next div on the page) which I found hard to close. The other solution I tried (which worked) was declaring text-align: right; for #outerdiv h1 and declaring a negative margin-top (margin-top: -5em;) to move h1 further up in div. Was that an acceptable solution or should I have done something more correct and elegant.

Paul_o_b

6:21 pm on Nov 17, 2011 (gmt 0)

Hi,

We'd need to see some html and css to diagnose the problem correctly but as a general rule you don;t want to be dragging elements upwards into position because that's a a very fragile mechanism should content change.

It's ok for the odd element in a confined space but in a fluid page you don't usually need to resort to doing that.

It still sounds as though you should have floated both elements as I suggested and then cleared the floats.:)

However if its working for you ok as it is then you may get away with it.

raydona

3:29 pm on Nov 20, 2011 (gmt 0)

Hi Paul_o_b,
Again many thanks for the reply. I am including a small portion of my code, the relevant bits, for you to look at. What I would like is the date "Sunday, November 20" to move vertically up the div and be on the same line as "home page > another directory". As a result the orange div should become smaller in height, it should be slightly bigger than the logo (unable to attach image but dimensions are given in code).
In the same way, although I did not ask about this in my original question, could you please show how to take the form slightly up the yellow div (consequence of which is that the div becomes narrower in height) so that the middle of the text entry field is on the same line as the text "Search this special directory for special things:".
The only way I could get around these problems was to use negative margins, which you said should be avoided in fluid pages. Many thanks for your help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Test Page</title>
 <style type="text/css">
  #DivA
  { min-width: 71.08em;
   background: #FFA500;
  }
  #DivA h1
  { font-size: 0.85em;
   font-family: Verdana;
   color: #000000;
   text-align: right;
   margin: 0 2.2em 0 0;
  }
  #DivB
  { min-width: 19em;
   background: #FFA500;
   border: none;
   margin-left: 1.4em;
  }
  #DivB img
  { float: left;
   margin: 0.9em 0.4em;
  }
  #DivB a:link, #DivB a:visited 
  { color: #000;
   text-decoration: none;
   font-size: 0.85em;
   font-family: Verdana;
  }
  #DivB a:hover 
  { color: #000;
   text-decoration: underline;
  }
  .topGap
  { line-height: 4em;
  }
/*********************************************************/
  #DivC
  { min-width: 71.08em;
   padding: 0.5em 0 1.2em 0;
   background: #FFD700;
   border: none;
  }
  #DivC h1 
  { line-height: 3em;
   font-size: 0.85em;
   font-family: Verdana;
   color: #000000;
   text-align: left;
   margin: 0 0 0 3.4em;
  }
  #formID
  { width: 26em;
   height: 2.16em;
   margin: 0 0 0 27.5em;
  }
  #inputID
  { width: 17.50em;
   height: 1.48em;
   font-size: 1.12em;
   font-family: Verdana;
  }
  #submitID
  { background-color: #FFA54F;
   width: 5.50em;
   height: 2.2em;
   margin-left: 0.9em;
  }
 </style>
</head>
<body>
   <div id="DivA">
    <div id="DivB">
     <a href="#"><img src="logo.gif" width="37"
        height="38"/></a> 
     <p class="topGap"><a href="#"> home page </a> >
           <a href="#">another directory </a></p>
    </div>
    <h1>
     Sunday, November 20
    </h1>
   </div>
   <div id="DivC">
    <h1>Search this special directory for special things:</h1>
    <form name="formID" id="formID">
     <input type="text" name="inputID" id="inputID" 
      size="40"/>
     <input type="button" id="submitID" value='SEARCH'/>
    </form>
   </div>
</body>
</html>

Paul_o_b

8:29 pm on Nov 20, 2011 (gmt 0)

Hi,

It's still the same answer and you need to float the items first and then clear the floats :)

Add this to your code to see what I mean :


form,p, h1{margin:0}
#DivA{line-height:4em}
#DivA,#DivC{overflow:hidden}/* contain:floats*/
#DivB{float:left}
#DivC{clear:both}
#DivC h1{float:left}

Your code is badly structured and you shouldn't have two h1 in a page anyway. Outside of html5 you should really only have one h1 per page. I'm not sure that the date is a good candidate for an h1 anyway but I suppose it depends on context.

Don;t use DivA and DivB as ids or classnames as that just complicates it even more. Give generic but meaningful id/classnames that describe the content but don't rely on presentational class names (such as .red but instead use something like .warning.)

Here's a quick re-write:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, form {
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;/* use clearfix if you want visible overflow */
}
#header, #search {
background: #FFA500;
overflow:hidden;/* clear;floats*/
zoom:1.0;/* clear floats ie7 and under*/
padding:2em 1.5em;
 clear:both;
}
#search { background: #FFD700; }
#header h1, #search h2 {
font-size: 0.85em;
font-family: Verdana;
color: #000;
float:right;
}
#search h2{
float:left;
margin:.5em 2em 0 0;
}
.logo {
float:left;
margin:-.5em 20px 0 0;
}
.breadcrumb .breadcrumb, .breadcrumb a:visited {
color: #000;
text-decoration: none;
font-size: 0.85em;
}
#inputID {
width: 17.50em;
height: 1.48em;
font-size: 1.12em;
font-family: Verdana;
}
#submitID {
background-color: #FFA54F;
width: 5.50em;
height: 2.2em;
margin-left: 0.9em;
text-transform:uppercase;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Sunday, November 20 </h1>
<p class="logo"><a href="#"><img src="logo.gif" width="37"
height="38"/></a></p>
<p class="breadcrumb"><a href="#"> home page </a> &raquo; <a href="#">another directory </a></p>
</div>
<div id="search">
<h2>Search this special directory for special things:</h2>
<form name="formID" id="formID">
<div>
<input type="text" name="inputID" id="inputID"
size="40"/>
<input type="button" id="submitID" value='Search'/>
</div>
</form>
</div>
</div>
</body>
</html>

raydona

3:06 pm on Nov 23, 2011 (gmt 0)

Hi Paul_o_b,
I'm really grateful for all your help. I know my code is badly structured, I mostly work on databases, so I'm fairly new to CSS. I'm striving to get better.
Your code worked perfectly, so I thank you for that. I just have two questions which I hope you'll clear up for me.
Firstly, is it possible to explain the meaning and purpose of "overflow:hidden;/* use clearfix if you want visible overflow */" in #wrap.
Secondly, in both #header and #search you have "overflow:hidden;/* clear;floats*/" and "clear:both;". A lot of information on the net say that both "overflow:hidden;" and "clear:both;" are ways of clearing floats. It might sound like a question from an inexperienced person but are the two statements doing the same thing or is it that each statement has a clear and specific purpose?
Again thanks for all your help.

lucy24

8:40 pm on Nov 23, 2011 (gmt 0)

The easy part:
overflow: hidden
means that if the content is bigger than its containing box, the part that doesn't fit simply disappears. Gone. Invisible.

The other options are scroll, meaning that the browser keeps the box the same size but adds a scroll bar-- vertical and/or horizontal as needed-- and visible, meaning that you can see the overflow. There is a nice illustration at w3c

:: shuffling papers ::

[w3.org...]

The Forums tend to eat fragment links. Look for #propdef-overflow and then scroll down a bit.

Oh, hey. How long has <cite> been around? I can use that in ebooks. I don't want to hear "since 1998, you doofus"

alt131

9:17 am on Nov 24, 2011 (gmt 0)

Hi raydona good to see you back again. I'll leave leave Paul to explain the techniques he's chosen, but for Lucy:

Oh, hey. How long has <cite> been around? I can use that in ebooks.I don't want to hear "since 1998, you doofus"

... Doofus?... haven't heard that in years. :)
Does 1995 [w3.org] sound better? ;)

Paul_o_b

4:08 pm on Nov 24, 2011 (gmt 0)

Hi,

Firstly, is it possible to explain the meaning and purpose of "overflow:hidden;/* use clearfix if you want visible overflow */" in #wrap.
Secondly, in both #header and #search you have "overflow:hidden;/* clear;floats*/" and "clear:both;". A lot of information on the net say that both "overflow:hidden;" and "clear:both;" are ways of clearing floats.

There are two points to take into account here and one is about "containing floats" and the other is about clearing floats. These are different things.

When an element holds only floated content it in fact holds nothing at all because floats are removed from the flow. The top edge of the containing block is not changed at all and sits where it would have been had the float not been present. The element is in fact empty and has zero height. If you were to apply a background to it you would see nothing.

Most of the time this is not what you want to happen and you want the parent to surround the float and provide a background colour or borders to surround your floated content.

This is where overflow:hidden (or auto) comes into play and overflow other than visible creates a new block formatting context and elements that create block formatting contexts automatically enclose their child floats (other properties that create block formatting contexts are absolute elements, floats, inline-block elements and table/cells - and could also be used to contain floats depending on the situation).

So all you need to contain a float is apply overflow:hidden but in some cases you may want visible overflow (such as in a drop down menu or where you have pulled something outside the container with margins etc). In those cases you can't use overflow:hidden and you should use another method such as the clearfix method which places generated content at the end of the container and applies clear:both to it (google revised clearfix for a full explanation).

Note:(older versions of IE don't contain floats with overflow:hidden and require the element to be in haslayout mode and then will also contain floats - just add zoom:1.0 or some other haslayout trigger - google haslayout for more info).

This brings us on to clear:both which I just mentioned. In the "olden days" we would add an empty div after the float and set this empty div to clear:both. Once the float had been cleared the parent suddenly sees that is has content other than floats and then contains everything as normal. Obviously adding empty divs is not very nice which is where the clearfix method came in and basically duplicated the empty div method but with generated content so no extra html was needed.

"Clear" is simply applied to an element so that it clears any floats above it in the html (clear:left, clear:right or clear:both). It does not however contain floats unless it is applied to an element after the floats that is not floated itself.

Therefore there are two concepts to understand: Containing floats and clearing floated content.

Hope that helps a little - It's not as straight forward as it could have been :)

text disappears

raydona

Paul_o_b

raydona

Paul_o_b

raydona

Paul_o_b

raydona

lucy24

alt131

Paul_o_b

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week