Search code examples
csshtmltextpositionstylesheet

Can someone please figure out how I can insert text properly into DIV?

First of all thanks in advance, since this page has helped me a lot with my progress in learning HTML. I am trying to learn it, so I can build my own site, where I will be able to write. And this is the problem: I want to insert text into each of the Divs, that fits in nicely with an even margin on all inner sides. And I don't want it to exceed the given parameters. When I try it always moves outside of the Divs. I would much appreciate it, if there is someone out there to help.

index.html

<div id="content">

<div id="top_news">
<div id="top_news1"></div>
<div id="top_news2"></div>
</div>

<div id="top2_news"></div>

<div id="top3_news">
<div id="top3_news1">
<div id="top3_news1_1"></div>
<div id="top3_news1_2"></div>
</div>
<div id="top3_news2"></div>
<div id="top3_news3"></div>
</div>

</div>

stylesheet.css

#container {
width            :  930px;
margin           :  auto;
background-color :  #ffffff;
} 

#content {
margin-top       :  7px;
margin-left      :  10px;
margin-right     :  10px;
margin-bottom    :  7px;
border       :  1px solid #d3d3d3;
width        :  908px;
}

#top_news {width:908px; height:250px;}
#top_news1 {width:453px; border-right:1px solid #d3d3d3; height:250px; float:left;}
#top_news1:hover {background-color:#fdb38d;}
#top_news2 {width:454px; height:250px; float:right;}
#top_news2:hover {background-color:#faf5a2;}

#top2_news {width:908px; height:225px; border-top:1px solid #d3d3d3;}
#top2_news:hover {background-color:#70addc;}

#top3_news {width:908px; height:250px; border-top:1px solid #d3d3d3;}
#top3_news1 {width:302px; height:250px; border-right:1px solid #d3d3d3; float:left;}
#top3_news1_1 {width:302px; height:125px;border-bottom:1px solid #d3d3d3;}
#top3_news1_1:hover {background-color:#d5addd;}
#top3_news1_2 {width:302px; height:124px}
#top3_news1_2:hover {background-color:#f0f0f0;}
#top3_news2 {width:302px; height:250px; border-right:1px solid #d3d3d3; float:left;}
#top3_news2:hover {background-color:#b7e795;}
#top3_news3 {width:302px; height:250px; float:left;}
#top3_news3:hover {background-color:#ff6686;}

I have come across another issue and since support was so quick and helpful, I wanted to ask it here. I noticed, that when I zoom out, that the Divs move and don't stay where I originally planed them. Has anyone got a solution? Thanks in advance

Solution

  • Append your text within a p tag with padding (extend the default padding) to the divs. To keep the box sizes add overflow:hidden to the divs or make them scrollable with overflow:scroll.

    DEMO

    I hope this is what you are trying to do :)