CODEWITHSUNDEEP
htmlcssresponsive-designpositioning
user1653626
user1653626

Reputation: 11

When window too smaller, the text goes away

I have floated a div to the right and put text in it. Whenever the window gets small the text just disappears completely. Am I positioning the text with a faulty technique or is there just something I am missing?

This is the css for the text I am trying to use:

.top_panel_text{
  position: relative;
  float: right;
  min-width: 10px;
  width: 40%;
  height: 200px;
  margin-right: 15%;
  margin-top: 50px;
}

Here is the rest of the code (you may have to expand the window to see the text at all):

http://jsfiddle.net/af5G6/

Thanks.

Upvotes: 0

Views: 66

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Just updated the fiddle check it..

Demo

.top_panel_text{
  position: relative;
  float: right;
    color:black;
  min-width: 10px;

  width: 40%;
  height: 200px;

  margin-top: 10px;
}
p{
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  color: black;
  font-size: 20px;
}

one thing to focus from your question:

If you want to contain the text within the div without getting hidden, you can just set **overflow:scroll** to the div..

Upvotes: 0

CDspace
CDspace

Reputation: 2689

In your fiddle at least, the text isn't disappearing, it's just getting displaced downwards. If you change the color of p in the CSs to blue you can see where it went. My guess is that it's a combination of the float: right; on the containing div panel_2, and the percentage margins on the classes face_picture and top_panel_text.

Upvotes: 1

Related Questions