How do I form a div to have the same dimensions as those of the content housed by it , and not any larger ?
The div that I currently has a larger width than that of the three divs that i have placed inside it.How can i get it to fit the inner div's size?
Here is the link to what i have now :: http://jsfiddle.net/jairajdesai/Fd5hQ/
HTML :
<div id="initial_options">
<div class="option_button" id="option_1">
<big>1</big> <span class="supplementary_text">text goes here</span>
</div>
<div class="option_button" id="option_2">
<big>2</2></big> <span class="supplementary_text">text goes here</span>
</div>
<div class="option_button" id="option_3">
<big>3</big> <span class="supplementary_text">text goes here</span>
</div>
</div>
CSS :
#initial_options {
position:relative;
top:18%;
left:0;
z-index:10;
background-color:#eee;
}
.option_button{
width:20%;
border-radius:none;
}
#option_1{
background-color:#013adf;
}
#option_2{
background-color:#f7fe2e;
}
#option_3{
background-color:#ff0000;
}
Inline element like <span> wraps around the content and more. Either you can use this or you can set the display property as inline.
div {
display: inline;
}
However setting to display as inline will not give you any option to add top/bottom margin and padding. If you want to add that too, you should use inline-block as the property.
div {
display: inline-block;
}
use display:inline-block; without paddings, margins and floats
Related
I have this following code:
<div class="parent">
<ul class="menu">
<li>this</li>
<li>width</li>
<li>is</li>
<li>dynamic.</li>
</ul>
<div class="something">
<span>so is this</span>
<table>because of this table.</table>
</div>
<div class="fill">
<span>and so is this. but this guy needs to fill the remaining width.</span>
</div>
</div>
Image
These 3 items - ul and 2 divs - are aligned side by side, and as you can see, they have dynamic widths. I have to make these 3 items fit inside div.parent, which width is fixed at 1200px.
Currently, I'm using 'float: left;' to align these 3 items side-by-side, and I can use 'display: inline-block;' if necessary [works perfectly]. But I've tried to use some tricks with 'display: table;' for the parent and 'display: table-cell;' for these 3 items, without success.
I need to fill this remaining space on the black div, which is the 'div.fill'. Any ideas?
EDIT2: http://jsfiddle.net/cAs9t/
Demo
Just add
div.fill { float: none; overflow: hidden; }
Where float: none removes the floating (you can also avoid applying float: left to .fill), and overflow: hidden (or anything different than visible) prevent floating elements from overlapping .fill.
Other ways:
You could use display: table-cell and display: table, but you couldn't specify which element should grow to fill all remaining space.
But if you want full control and want to distribute remaining spaces in a more complex way, you should use Flexboxes.
I made the parent display:table and the 3 children as display:table-cell. Now all 3 children fill the width of the parent and you don't need to float any of them. One advantage of this method is that you can utilize vertical-align and also avoid wrapping of blocks when the parent is shorter than the content. In a way, you get all the goodness of a table.
Υou can set the width of the first 2 children and leave the last without specifying width so that it will fill the parent container.
See this demo.
Use display:table for the container and display:table-row for its direct children.
Set height:0 for the divs with variable height and height:auto for the div that should fill the remaining space.
If the container needs a fixed height, whether in pixels or %, you can add a single div with {overflow-y:auto; height:100%} to the horizontal filler and add content within there.
<div style="height:300px; border:1px solid red;padding:2px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
I take as much space as needed
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px">My parent will fill the remaining space</div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
<p>I take as much space as needed as well</p>
</div>
</div>
</div>
Flexbox solution
Note: Add flex vendor prefixes if required by your supported browsers.
.parent {
width: 1200px;
display: flex;
}
.menu {
margin: 0;
}
.menu li {
display: inline-block;
}
.fill {
flex-grow: 1;
}
<div class="parent">
<ul class="menu" style="background: #6cf">
<li>this</li>
<li>width</li>
<li>is</li>
<li>dynamic.</li>
</ul>
<div class="something" style="background: #fd6">
<span>so is this</span>
<table>because of this table.</table>
</div>
<div class="fill" style="background: #5c5">
<span>and so is this. but this guy needs to fill the remaining width.</span>
</div>
</div>
Okay so I have an image,
<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan">This is what should appear when hovering over first image</span>
</div>
Now, how do I make it so that "firstspan" only shows up when someone hovers over the "first" image? Here is what I tried for the css.
#firstspan {
display: none;
}
#first:hover #firstspan {
display: block;
}
but this doesn't seem to work. Any idea on what is wrong?
Also, is there a way for #first to be positioned inside the image on the bottom? Rather than outside the image?
Try this
img#first:hover ~ #firstspan {
display: block;
}
DEMO.
.column:hover #firstspan {
display: block;}
Demo
Your solution doesn't work because your image tag and span tag are siblings. Your rule is looking for a parent to descendant relationship.
If you can wrap your image tag and span tag in a DIV and move the id for the image tag to this new container DIV your CSS should work.
<div id="first">
<img>
<span id="firstspan"></span>
</div>
Try like this:
<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan"> your text </span>
</div>
#firstspan {
display: none;
}
.column:hover #firstspan{
display: inline;
}
I am trying to contain a div's borders within its parent div, and I would like the overflow text from the child div to automatically put a scroll-bar on the child div. I have tried everything that I can think of, but I do not know of a way to do that which I am trying to do. Could someone please offer me some advice on how to do this as efficiently as possible?
My parent div has a percentage-defined height though
This should not be a problem, as long as parents has an height that has a valid value.You can set a height or a max-height width a percentage value.
max-height, will let it grow untill it matches the max value.
http://jsfiddle.net/E2Mfa/
For instance this style sheet:
html, body, .childContainer1 {
height:100%;
background:#edf;
}
body, div, p {
margin:0;
}
.parentContainer {
height:25%;
background:#fed;
}
.childContainer1 {
overflow:auto;
}
.childContainer2 {
max-height:100%;
background:#def;
overflow:auto;
}
If you remove height from html or body, it doesnt work anymore.
When you give percentage height, it calculates it from its parent height.
If no height found in CSS parent, then there is no value to calculate from.
max-height returns no values avalaible to calculate a percentage height for the childs
The structure used here :
<div class="parentContainer">
<div class="childContainer1">
...
</div>
</div>
<div class="parentContainer">
<div class="childContainer2">
...
</div>
</div>
<div class="parentContainer">
<div class="childContainer1">
...
</div>
</div>
<div class="parentContainer">
<div class="childContainer2">
...
</div>
</div>
Does your parent div have an absolute size? If it does you could so something like this:
<div style="width:100px;height:100px;">
<div style="position:absolute;overflow:auto;border:solid black 1px;">My Content</div>
</div>
Check this (not sure wether you want something like this),
<div class="outer-div">
<div class="inner-div">Test content Test content Test content Test content Test content Test content Test content Test content Test content Test content</div>
</div>
.outer-div {
width :200px;
height :100px;
border: 1px solid gray;
}
.inner-div {
width :50%;
height :75px;
border: 1px solid black;
overflow: auto;
}
Demo Fiddle
I am looking to create the effect shown in the following image:
Where the black background behind the text staggers, rather than creating a black box when the string wraps. Can this be achieved with just CSS on a dynamic string?
This is actually the default behaviour for inline elements, such as span.
The following code should have this effect.
<span style="background-color: black; color: white">EYES ON<br/>FILM</span>
Note that the <br/> is there for illustrative purposes, it will also work if the text is wrapped by the browser.
If you need to do this for a div, make sure to set the display: inline style on it.
Here is how you do it. The basic idea is to wrap each word in a separate div and nest those divs within another div with a width that wraps the inline divs.
<style>
.foo {
display: inline;
background-color: #000;
color: #fff;
margin: 0;
}
.wrapper {
width: 100px;
}
</style>
<div class="wrapper">
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div>
</div>
Something along these lines?
http://jsfiddle.net/wxDa7/
<style>
#a
{
width:50px;
font-size:20px;
line-height: 90%;
text-transform:uppercase;
}
#a .b
{
background-color:black;
color:white;
}
</style>
<div id="a">
<span class="b">Test test </span>
</div>
This autobreaks at a defined width. Use %nbsp; to get the extra space after the text.
It works putting the text inside a <span> inside a <p>, or using the Teletype Text Element (<tt>), or <code> tag.
<tt> is not accepted in HTML5.
Example jsfiddle:
http://jsfiddle.net/gmDWP/
I have several boxes containing the following!
<div class="box">
<div class="image">
<img src="anything.png" /> <!-- The width is dynamic -->
</div>
<div class="box-text">
<h2>Some Title</h2>
<p>Lorem ipsum ...</p>
</div>
</div>
The problem is that the text floats to the left after the image. I want it to go straight down, as I've marked it in the following image:
This is the way it should look like:
I do not want to use tables or javascript. I can't use margin-left for the box-text, because the width of the image is dynamic.
Thanks for your contribution!
try using display: table for your box class and display: table-row for both image and box-text classes. Then align content using vertical-align: top on image and text.
Do not use tables, but make the <div>s act like the cells of a table, then make the inline content vertically aligned to the top:
.box{display:table}
.image{display:table-cell;vertical-align:top;}
.box-text{display:table-cell;vertical-align:top;}
Check it here
Try this css:
.image { float: left; }
.box-text { float: left; }
Also you may want to stop floating elements after box div, so don't forget some clean up in the end:
<div style="clear:both"></div>
Here's an fiddle which shows how to acheive this layout: http://jsfiddle.net/X7j4P/
.box {
overflow:hidden;
}
.image {
float:left;
}
.image img {
width:300px;
}
.box-text {
width:300px;
float:left;
}
p {
margin-bottom:10px;
}