March 5, 2012

Text layout issue with div inside of annother div with a fixed width

Question by jdln

I have a div.one which has a fixed size and a background color. Within it is another div which starts off hidden but is shown with javascript in certain circumstances.

How can I make it so when div.two is shown, you can see its background color and the text doesn’t wrap? Basically I want it to behave like it doesn’t have a containing div with a fixed size. Is this possible? Thanks

<div class="one">
  <div class="two">
    Some Text
  </div>
</div>

.one {
  width: 20px;
  height: 20px;
  background-color: white;
}
.two {
  background-color: grey;
  display: none;
}

Answer by bookcasey

Demo

.two {
    display: inline-block;
    background-color: grey;
    white-space:nowrap;

}

Answer by Starx

Fix the dimension of the div as well to 20px and 20px, and set the white-spacing to nowrap.

.two {
  width: 20px;
  height: 20px;
  white-space: nowrap;
  ...
}

Check out this demo to see if I solved your question.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!