• 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

    • AMD 9060 XT performance benchmarks vs Nvidia 5060 Ti, 5060, AMD 9070 XT, 7600 XT, leaks

      By Mockingbird · Posted

      The Radeon RX 9060 XT is 5% slower than the GeForce RTX 5060 Ti, but the GeForce RTX 5060 Ti is 23% more expensive, at least when comparing MSRPs.
    • Radeon RX 9060 XT 16GB performance revealed

      By Mockingbird · Posted

    • Politically funny images of the World

      By snowy owl · Posted

      I would love to see Musk's face! 🤣🤣🤣
    • UK government trial reveals Microsoft 365 Copilot's surprising impact on daily work

      By fingletmein · Posted

      I think each AI option has their ups and downs. For Copilot, I find it more personable in how it talks compared to GPT & Gemini. I also appreciate the open ended questions it often provides at the end of its responses to keep the conversation going.
    • Microsoft offers free access to AI video creation with Bing Video Creator

      By pradeepviswav · Posted

      Microsoft offers free access to AI video creation with Bing Video Creator by Pradeep Viswanathan Two years ago, Bing Image Creator became one of the first major online services that allowed users to create images from text using OpenAI’s DALL-E model. Today, Microsoft is introducing Bing Video Creator, powered by OpenAI’s Sora, allowing users to create videos with text prompts. Despite announcing Sora last year, OpenAI has not been able to expand its availability to millions of ChatGPT users due to huge AI infrastructure requirements. It is still only available to ChatGPT Pro subscription users, which costs about $200 per month. Recently, Google announced its Veo 3 video generation model, which performs significantly better than OpenAI’s Sora, to all Gemini paid subscribers, making video generation accessible to even Gemini Pro subscribers, which costs just $20 per month. Now, Microsoft is democratizing access to video generation models by making Bing Video Creator free for all Bing users. Bing Video Creator is rolling out today globally (excluding China and Russia) on the Bing Mobile App, and it will be coming soon to the Bing desktop experience within Copilot Search. Bing Video Creator users will have the ability to choose between Fast and Standard generation speeds. Each user will have 10 Fast creations; following that, users can redeem 100 Microsoft Rewards points for each Fast creation or continue with Standard creation speeds. Once you have downloaded the Bing mobile app, here’s how you can access the Video Creator feature: Open Video Creator within the Bing Mobile app by clicking on the menu in the bottom right corner and selecting “Video Creator.” Just type in a text description of the video you want to create in the prompt box. Once the prompt text is ready, just tap “Create.” Or you can also just type directly into the Bing mobile app search bar "Create a video of..." to create a video. You’ll receive a notification when your video is ready to view. If required, you can also download the video or share it via social media or email. You will also have the ability to copy a direct link to the video for easy sharing elsewhere. Microsoft will be storing the generated videos for up to 90 days in your account for easy access later. Microsoft noted that the Bing Video Creator videos are 5 seconds long and can be created only in 9:16 format for now. Microsoft will be adding the 16:9 format soon. When you are waiting for your video to be created, you can also queue up another two videos. Once one of the slots becomes available, you can add another one to the queue. When Bing Video Creator becomes available on desktop, you can visit Bing.com/create for both image and video creation needs.

  • 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
      150
    2. 2
      ATLien_0
      122
    3. 3
      Xenon
      121
    4. 4
      snowy owl
      99
    5. 5
      +Edouard
      95
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!