• 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

    • Steve Jobs' wife wants to see Jony Ive-OpenAI's mysterious AI gadget succeed by Hamid Ganji This month, OpenAI, the company behind ChatGPT, made a significant stride by announcing a $6.5 billion acquisition of io. The startup belongs to former Apple design chief Jony Ive and OpenAI's current CEO, Sam Altman, and it's working on a mysterious AI gadget. Interestingly, another person who benefited from this deal and its future outcomes is Steve Jobs's wife, Laurene Powell Jobs. With a net worth of over $14 billion, Powell Jobs is the founder and president of Emerson Collective, an investment firm. After Ive left Apple in 2019 and founded his businesses, LoveFrom and io, Powell Jobs seized the opportunity to invest in both startups. The investment is said to exceed $1 billion. In an interview with The Financial Times, Jony Ive and Powell Jobs discussed their experience working with Steve Jobs as well as the dark side of technology. Ive said one of his incentives for collaborating with OpenAI and Sam Altman is that "humanity deserves better." In another interview in May, Jony Ive also hinted at the "unintended consequences" of his work at Apple that "were far from pleasant." "If you make something new, if you innovate, there will be consequences unforeseen, and some will be wonderful and some will be harmful," Ive added. "While some of the less positive consequences were unintentional, I still feel responsibility. And the manifestation of that is a determination to try and be useful." Laurene Powell Jobs also confirmed Jony Ive's comments, adding that "there are dark uses for certain types of technology," even if the tech wasn't initially designed with that kind of use in mind. Apple's former design chief also endorsed Powell Jobs's involvement in LoveFrom, saying the company could not exist without her help. Yet, the product Ive and OpenAI have in mind is still a mystery, but some people speculated that it might be a screenless AI phone. Meanwhile, some analysts believe the collaboration between Ive and OpenAI should raise the alarms for Apple.
    • Because some people prefer to pay for a service instead of attaining it dishonestly... You comment makes about as much sense as saying, "why would anyone pay for Netflix when torrents exist?"
    • Boy, I wonder how much time they'll save when Copilot ######s something up and they find out the error years if not decades later. It's not like UK had a massive ######up within their postal service decades ago that destroyed hundreds of lives of Brits because their computer systems were hallucinating s**t...
    • You clearly missed the sarcasm in that comment. It's pretty clear that the point of that comment was to point out the irony in the fact that nearly every negative thing people say about Windows 11, also applies to Windows 10. Heck, even the Win10 start menu was wildly unpopular when it came out.
    • Even biggest AMD fans and Intel haters will love this 14600K deal as you get free 240 AIO by Sayan Sen Last week, the Intel 14600K was on sale for $193, and you also got a free game with it. However, it looks like there is still some stock of these chips left, as the processor is selling for $199. Along with the free game, you also get a free 240 mm AIO liquid cooler (purchase link under the specs list below). The 14600K is based on Intel's 14th Gen Raptor Lake Refresh design. Since it is a K variant, it is unlocked for overclocking. However, do keep in mind that it is a fairly power-hungry processor, much more so than something like an equivalent Ryzen. But the chip is fairly powerful, and you can enjoy excellent gaming and productivity performance with it. Speaking of AMD Ryzen, the 14600K is about equivalent to the Zen 4-based 7600(X) in gaming and faster in productivity, thanks to the E-cores. Ensure your motherboard has decent VRM power delivery and cooling (ideally a Z790 chipset motherboard), plus you will need a good quality air cooler (and a complementary good case with excellent airflow) or a 240/280 mm AIO liquid cooler. Thus this is where the free MSI AIO cooler will come in handy. The technical specs of the 14600K are given below: Core Count: 14 (6 Performance Cores + 8 Efficiency Cores) Thread Count: 20 Base Clock Frequency: 3.5 GHz (P-core), 2.6 GHz (E-core) Boost Clock Frequency: Up to 5.3 GHz Cache: 24 MB Cache Stock Memory Support: DDR4 (3200 MT/s) and DDR5 (5600 MT/s) Socket: LGA 1700 TDP: 125 W Integrated Graphics: Intel UHD Graphics 770 PCIe Support: PCIe Gen 5 (16 lanes) and Gen 4 (4 lanes) Process Technology: Intel 7 (10 nm) Maximum Temperature: 100° C Get the Intel Core i5-14600K at the link below (make sure to select the checkbox for the free AIO and the free game): Intel Core i5-14600K BX8071514600K + MSI MAG Coreliquid A13 240mm Liquid Cooler 240mm + Free Intel Spring Bundle (Civilization VII & Dying Light: The Beast): $199.99 (Sold and Shipped by Newegg US first-party seller) 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.
  • 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
      143
    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!