• 0

DIV CSS text display problem

Asked by alsheron,

 Share

Question

Mentor

alsheron

Posted
Posted (edited)

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
Mentor

Marc A.

Posted
Posted

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
Mentor

alsheron

Posted
  • Author
Posted
  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
Mentor

Marc A.

Posted
Posted

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
Mentor

alsheron

Posted
  • Author
Posted
  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
Mentor

Marc A.

Posted
Posted
  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.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Acronyms....

      By Mindovermaster · Posted

      Jumping unicorns says that I forgot you. I never grunt.
    • Microsoft can't help break Windows Outlook as even opening an email now sends it crashing

      By hellowalkman · Posted

      Microsoft can't help break Windows Outlook as even opening an email now sends it crashing by Sayan Sen It is no surprise that right now, Microsoft's priority is to move users onto the New Outlook for Windows if they haven't done so already. The company began default-deployment of the new app on fresh Microsoft 365 systems and also made switching between the New app and the classic app easier. At the same time, the company is also trying to improve the new app as it recently added yet another feature that will allow people to use the app without an internet connection, and it also blocked more file types to improve security. Perhaps as a consequence of this relentless pursuit, the classic Outlook app has become quite prone to bugs and issues in recent times as Microsoft may be losing its focus. For example, in April, the downloads for Classic Outlook broke and more recently, this month, the tech giant confirmed that a major Calendar feature upgrade has broken the app in several different ways. Microsoft has provided workarounds for several of the issues so check this article out if you are having problems. And the bugs just keep on coming as Microsoft earlier today confirmed that opening emails or starting a new email will now crash the application, and it affects all channels. The company explains: Opening a mail on an email client is probably the most common and basic functionality a user is expected to do, so it is annoying to see such a bug not getting caught during testing. Again, this perhaps indicates that Microsoft's focus maybe elsewhere at the moment. The company has shared the Windows Event Viewer Log for the crash and the problematic OLMAPI32 DLL file is related to Microsoft Messaging Application Programming Interface (MAPI). The issue reminds us of the similar OLEAUT32 dll issue fix in our recent ReactOS article. The event viewer log notes: Faulting application name: OUTLOOK.EXE, version: 16.0.14334.20090, time stamp: 0x683fe030 Faulting module name: OLMAPI32.DLL, version: 16.0.14334.20090, time stamp: 0x683ff910 Exception code: 0xc0000409 Fault offset: 0x00196e1c Faulting process id: 0x9100 Faulting application start time: 0x01dbdbe04fe54514 Faulting application path: C:\Program Files (x86)\Microsoft Office\root\Office16\OUTLOOK.EXE Faulting module path: C:\Program Files (x86)\Microsoft Office\root\Office16\OLMAPI32.DLL Thankfully, Microsoft has issued a workaround for the problem as it currently investigates the bug by manually creating a FORMS2 folder which should exist at the following address: C:\Users\\AppData\Local\Microsoft\FORMS2. Microsoft explains: You can find the support article for the issue here on Microsoft's official website.
    • Meta says you'll soon be getting ads on WhatsApp

      By Case_f · Posted

      I have no issue with a service not being offered free. That's perfectly understandable. I do have issue with seeing ads literally everywhere these days, though, plastered in layers over every website and in every app. Especially with how annoying they tend to be (hell, many ads these days even promote literal scams). That's why people use ad blockers. Let me choose. Offer an ad-free experience for a couple of bucks (but be reasonable, don't get too greedy) or ads for free access. Don't make it ads or nothing.
    • Trump announces a gold smartphone for $499 and new "T1 Mobile" 5G wireless service

      By gft77 · Posted

      When will you be getting the phone and service?
    • Nexus Mods owner steps down citing toll on personal wellbeing

      By Steven P. · Posted

      Yeah, running a site does consume your whole life.

  • Recent Achievements

    • Week One Done
      korostelev earned a badge
      Week One Done
    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
    • Enthusiast
      Motoman26 went up a rank
      Enthusiast

  • Popular Contributors

    1. 1
      +primortal
      684
    2. 2
      ATLien_0
      268
    3. 3
      Michael Scrip
      182
    4. 4
      +FloatingFatMan
      177
    5. 5
      Steven P.
      139
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!