• 0

DIV CSS text display problem


Question

I'm having trouble getting the height of DIV boxes on a page to increase to accomodate the text of text on the page. As you can see on the page, the text overflows outside the DIV boxes at the bottom. I vaguely remember something about text being treated differently in the flow of the page meaning it wont "push down" the bottom of it's containing DIVs..... Does anyone know what exactly is causing this and how it can be fixed?

post-90451-1170075175_thumb.jpg

<!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>Welcome to 105 Solutions | Business Intelligence for Intelligent Business</title>


<link href="main.css" rel="stylesheet" type="text/css" />
&lt;script type="text/javascript" src="chrome.js"></script>;link href="chromestyle.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body&gt;


&lt;div id="container"&gt;


&lt;div id="topboxes"&gt;
&lt;div class="topbox"&gt;&lt;img src="images/b2.jpg" /&gt;&lt;/div&gt;
&lt;div class="topbox"&gt;&lt;img src="images/105logo2.jpg" width="245" height="228" /&gt;&lt;/div&gt;
&lt;div class="topbox"&gt;&lt;img src="images/b5.jpg" /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="spacer"&gt;&lt;/div&gt;


&lt;div class="chromestyle" id="chromemenu"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="index.html">Home</a></li>;li&gt;&lt;a href="approachpeople.html" rel="dropmenu1"&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="services.html" rel="dropmenu2"&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="industries.html">Industries</a></li>;li&gt;&lt;a href="partners.html">Partners</a></li>;li&gt;&lt;a href="news.html">News</a></li>;li&gt;&lt;a href="contactus.html">Contactt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;!--1st drop down menu --&gt; 
&lt;div id="dropmenu1" class="dropmenudiv" style="width:100px"&gt;
&lt;a href="approachpeople.html">Ouroach&lt;/a&gt;
&lt;a href="approachpeople.html">Ourle&lt;/a&gt;
&lt;a href="regionsclients.html">Ourons&lt;/a&gt;
&lt;a href="regionsclients.html">Ournts&lt;/a&gt;&lt;/div&gt;

&lt;!--2nd drop down menu --&gt; 
&lt;div id="dropmenu2" class="dropmenudiv"&gt;
&lt;a href="#"&gt;Overview&lt;/a&gt;
&lt;a href="#"&gt;Market Entry Support&lt;/a&gt;
&lt;a href="#"&gt;Sales Intelligence&lt;/a&gt;
&lt;a href="#"&gt;Competition Intelligence&lt;/a&gt;
&lt;a href="#"&gt;Due Dilligence&lt;/a&gt;
&lt;a href="#"&gt;Industry Insight Reports&lt;/a&gt;
&lt;a href="#"&gt;Economic Modelling &amp; Forecasting&lt;/a&gt;
&lt;a href="#"&gt;Training &amp; Seminars&lt;/a&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
cssdropdown.startchrome("chromemenu")
&lt;/script&gt;



&lt;div class="textbox" style="height:150px"&gt;
  &lt;h5&gt;Our Approach&lt;/h5&gt;
  &lt;br /&gt;
Basing business decisions on flawed intelligence compromises your company’s strategic direction and its survival. That’s why 105 Solutions provides qualified up-to-date data and business intelligence on the UK, US and EMEA market&lt;/div&gt;
&lt;div class="textbox" style="height:150px"&gt;Our unique expertise delivers the information you need to make informed decisions, whether in times of crisis or in the course of simply running your business. &lt;span class="textbox"&gt;Basing business decisions on flawed intelligence compromises your company’s strategic direction and its survival.&lt;/span&gt;&lt;/div&gt;
&lt;div class="textbox" style="height:150px"&gt;Many years of experience have shown our intelligence services to protect business ventures, minimise financial losses, increase profits, preserve proprietary data and corporate reputations as well as produce successful outcomes in litigation. 105 Solutions provides qualified up-to-date data and business intelligence on the UK, US and EMEA markets. &lt;/div&gt;

&lt;div class="textbox-blue"&gt;
  &lt;p&gt;&lt;strong&gt;What We Do:&lt;/strong&gt;&lt;/p&gt;
  &lt;ul style="margin-left:20px"&gt;
    &lt;li&gt; Understand your business needs.&lt;/li&gt;
    &lt;li&gt; Analyse the benefits and advantages of your  product &amp; service.&lt;/li&gt;
    &lt;li&gt; Map the competitive landscape.&lt;/li&gt;
    &lt;li&gt; Identify &amp; review potential partners.&lt;/li&gt;
    &lt;li&gt; Profile regulators.&lt;/li&gt;
    &lt;li&gt; Assess political &amp; operational risks.&lt;/li&gt;
    &lt;li&gt; SWOT analysis &amp; feasibility tests.&lt;/li&gt;

   &lt;li&gt; Work with you  to identify, formulate &amp; implement the most effective business strategy for long-term growth &amp; profitability.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h5&gt; &lt;/h5&gt;
  &lt;/div&gt;
&lt;div class="textbox-blue"&gt;
  &lt;p&gt;&lt;strong&gt;How You  Benefit:&lt;/strong&gt;&lt;/p&gt;
  Our integration of secondary research and anonymous  interviews with competitors and other market players, customers and industry  experts contributes to giving you a thorough and accurate understanding of  various market characteristics, including size, segmentation, penetration,  price sensitivity and underserved market niches. If you recognize this golden  opportunity and want to seize it, we can help you realize your goals.&lt;/div&gt;
&lt;div class="textbox-blue"&gt;
  &lt;p&gt;&lt;strong&gt;Case Study:&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;A training provider wanted to  actively penetrate an undersold market. We conducted a comprehensive overview  of new industry segments, identifying highest potential growth segments and  obtaining key insights specific to  the client’s requirements and needs.&lt;/p&gt;
  The client shifted market focus from traditional  segments to a faster growing segment in the construction industry.&lt;/div&gt;





&lt;div class="spacer"&gt;&lt;/div&gt;


&lt;div id="footer"&gt;105 Solutions Ltd © 2005 All rights reserved I Privacy Policy I Ethical Statement&lt;/div&gt;

&lt;!--END container--&gt;&lt;/div&gt;





&lt;script type="text/javascript" src="dropmenu.js"></script>&lt;/body&gt;

&lt;/html&gt;

Edited by Joel
Link to comment
https://www.neowin.net/forum/topic/533924-div-css-text-display-problem/
Share on other sites

5 answers to this question

Recommended Posts

  • 0

It is certainly one of a few things; either the parent div has been given a set height, or the text has been floated. To answer your question, text always has an effect on it's parent container when no specific css has been declared. We might be better able to help if we could see your style sheet.

  • 0
  Marc A. said:
It is certainly one of a few things; either the parent div has been given a set height, or the text has been floated. To answer your question, text always has an effect on it's parent container when no specific css has been declared. We might be better able to help if we could see your style sheet.

Thanks for the reply.... I've been searching Googlie in the meantime and found a few things about this and have tried a few suggestions but they're not working. I suspect i'm overlooking something which may be obvious to someone else....

The CSS:

body { 
	padding:0;
	background-image:url(images/s_background2.gif);
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:62.5%;
	text-align: center;
}

#container {
	background-color:#FFFFFF;
	margin:0 auto;
	width: 768px;
	text-align: center;
	padding:1px;

}

#footer {
	font-size:1.1em;
	width:768px;
	height:15px;
	margin:0 auto;
	background-color:#FFFFFF;
	margin-top:10px;
	color:#002060;
	border-top: solid #002060 1px;
}

div.spacer {
  clear: both;
  }

  div.clearer {clear: left; line-height: 0; height: 0;}


#topboxes {

margin:0 auto;
}

div.topbox {
	float: left;
	padding:5px;
	text-align: center;
	width: 246px;
	background-color: #3778CC;
  }


div.textbox {
	width: 236px;
	float: left;
	padding:10px;
	height: 175px;
	font-size:1.2em;
	padding:10px;
	text-align: left;
	color: #002060;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-color: #F4F8FF;



}


div.textbox-blue {
	width: 236px;
	float: left;
	padding:10px;
	height: 175px;
	font-size:1.2em;
	padding:10px;
	text-align: left;
	color: #3075BA;
	font-family: Geneva, Arial, Helvetica, sans-serif;

}


h5 {

padding:0px;
margin:0px;
font-size:1.1em;

}

Hopefully you can see what's causing the problem... :)

  • 0

In your CSS, you have the following:

div.textbox-blue {
	width: 236px;
	float: left;
	padding:10px;
	height: 175px;
	font-size:1.2em;
	padding:10px;
	text-align: left;
	color: #3075BA;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

And the one line that is screwing you up is the height property:value.

Comment it out and see how it fixes itself, like this:

div.textbox-blue {
	width: 236px;
	float: left;
	padding:10px;
	/*height: 175px;*/
	font-size:1.2em;
	padding:10px;
	text-align: left;
	color: #3075BA;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

  • 0
  Marc A. said:
In your CSS, you have the following:
div.textbox-blue {
	width: 236px;
	float: left;
	padding:10px;
	height: 175px;
	font-size:1.2em;
	padding:10px;
	text-align: left;
	color: #3075BA;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

And the one line that is screwing you up is the height property:value.

Comment it out and see how it fixes itself, like this:

div.textbox-blue {
	width: 236px;
	float: left;
	padding:10px;
	/*height: 175px;*/
	font-size:1.2em;
	padding:10px;
	text-align: left;
	color: #3075BA;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

I must admit, i'm a little embarrassed i missed something as simple as that. I think it was a case of me looking for something much more complex like a browser rendering problem that needed a hack that made me miss it....

However..... I still need the boxes to be a minimum height and then expand accordingly..... Is the min-height attribute the best way of doing this?

Thanks!

  • 0
  alsheron said:
I must admit, i'm a little embarrassed i missed something as simple as that. I think it was a case of me looking for something much more complex like a browser rendering problem that needed a hack that made me miss it....

However..... I still need the boxes to be a minimum height and then expand accordingly..... Is the min-height attribute the best way of doing this?

Thanks!

Yep, so long as you don't mind IE6 not paying attention to it... lord knows most developers don't anymore. IE7 will adhere to it.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • #1 DP and #8 HDMI, you can connect both monitors to your motherboard. It's not just one or the other, you can use both at the same time.
    • So, I will see exactly ZERO ads, because I f**ked off the stupid Facebook/Meta ages ago. I don't miss any of it at all.
    • Thunderbird 139.0.1 by Razvan Serea Thunderbird is a free, open-source, cross-platform application for managing email and news feeds. It is a local (rather than a web-based) email application that is powerful yet easy-to-use. Thunderbird is clean and elegant by default, but easily customizable to match your workflow and visual preferences. It is loaded with unique and powerful features. Thunderbird is developed, tested, translated and supported by the folks at Mozilla Corporation and by a group of dedicated volunteers. Thunderbird gives you control and ownership over your email. There are lots of add-ons available for Thunderbird that enable you to extend and customize your email experience. Thunderbird gives you IMAP/POP support, a built-in RSS reader, support for HTML mail, powerful quick search, saved search folders, advanced message filtering, message grouping, labels, return receipts, smart address book LDAP address completion, import tools, and the ability to manage multiple e-mail and newsgroup accounts. Thunderbird 139.0.1 fixes: Thunderbird could crash when copying a local folder to IMAP Upgrade to 139.0 incorrectly switched Table View to Cards View Download: Thunderbird 139.0.1 for Windows (EN/US) | 32-bit | ~70.0 MB (Open Source) Download: Thunderbird 139.0.1 for Linux (EN/US) | 74.7 MB Download: Thunderbird 139.0.1 for Mac OS (EN/US) | 127.0 MB Download: Thunderbird 139.0.1 in other languages View: Thunderbird Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • It's both. Bazzite forked the game mode so it's not just simply running big picture mode like on full desktop.
  • Recent Achievements

    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • Week One Done
      lilred1938 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      142
    2. 2
      Xenon
      130
    3. 3
      ATLien_0
      124
    4. 4
      +Edouard
      102
    5. 5
      snowy owl
      97
  • Tell a friend

    Love Neowin? Tell a friend!