• 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

    • Save 15% on the Insta360 Link 2 4K Webcam, now available at the lowest price by Taras Buria Insta360 is known for its high-quality 360-cameras, but the company also offers high-end webcams for those who want to elevate their video calls or streaming. Right now, the Insta360 Link 2 4K webcam is available at a new all-time low price, saving you 15% off the standard MSRP. The Insta360 Link 2 is not your standard 4K webcam. This camera is mounted on a two-axis gimbal that physically pans and tilts to follow you as you move around the room. You can also set boundaries to prevent the camera from capturing certain areas and control it with gestures for a hands-free experience. The camera itself has a large 1/2" 4K sensor that captures more light and details with HDR and low-light mode support. A larger sensor also means a more natural bokeh effect. Built-in microphones support voice focus and voice suppression, and the camera can balance your voice with background music. Other features include additional modes, such as whiteboard mode, DeskView mode, portrait mode, and privacy mode. The latter tilts the camera down after 10 seconds of inactivity (you can also push it down manually). The Insta360 Link 2 is also remotely operated with a dedicated phone app, plus its desktop software lets you adjust features like background, filters, and more. Insta360 Link 2 4K Webcam - $169.99 | 15% off on Amazon US Insta360 Link 2 4K Webcam Tripod Bundle - $195 | 15% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • RIP Jonathan Joss aka John Redcorn https://www.nbcnews.com/news/us-news/jonathan-joss-king-hill-voice-actor-killed-san-antonio-shooting-rcna210437
    • This will happen regardless what simply because people are upgrading their gear.
    • Rest in Peace, Loretta.  😢
    • Well, so did Lt. O'Reilly... but, we had to go there. 😂
  • Recent Achievements

    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      160
    2. 2
      ATLien_0
      124
    3. 3
      Xenon
      120
    4. 4
      snowy owl
      109
    5. 5
      +Edouard
      97
  • Tell a friend

    Love Neowin? Tell a friend!