This question already has answers here:
Shrink-to-fit div and paragraph, based on image?
(6 answers)
Closed 8 years ago.
I have a div with an img and a p tag. I want the div to "shrink-wrap" the image and let the text organically wrap. However, I'm trying to do this with absolutely no javascript or constraints (ie width=300px / 50% etc) as my frame needs to be fluid.
Here's an example of something similar to what I have now: How can I make the outer dive match the size of the "Google" image without using fixed sizes or javascript?
http://jsfiddle.net/pVF74/
div {
border:1px solid black;
display:table;
width:1%;
}
http://jsfiddle.net/pVF74/2/
Add display: inline-block; to your div's class.
Example here http://jsfiddle.net/r9rLr/
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 3 years ago.
I have 3 divs placed side by side. When I'm trying to put a header (or any element) inside of the middle div (or any div), that div floats way down. Why does it do that?
CSS I used for divs:
div {
display: inline-block;
background-color: lightgray;
height: 600px;
width: 300px;
}
Add *{box-sizing:border-box} to your CSS. It defines how the width and height of an element are calculated.
This question already has answers here:
Inline elements and line-height
(2 answers)
Closed 5 years ago.
CSS:
span{line-height:25px;}
HTML:
<div><span>16<br>Fri.</span></div>
However, the height of div is 49.6px and line-height is 24.8px.
Only one computer has this situation.
Other height is 50px.
How to fix?
You fix it by using display: inline-block.
Inlined elements can't be sized. Consider it as simple text you can only color.
span{
line-height: 25px;
}
<div><span>16<br>Fri.</span></div>
This question already has answers here:
Center image inside div horizontally
(4 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 5 years ago.
I am new to css and want to understand some basics. What is the need to set image display property as block to center it inside div ?
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
How does changing the display to block change the behaviour of img element inside div (how does it help center image)?
img is an inline element so setting it display: block will completely change how it flows on the page
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 8 years ago.
I'm using Bootstrap for my responsive layout. Within the .container I want to have a div which isn't limited to the width of the container. Furthermore I want it to be stretched over the full body. I could place the div outside the .container but I don't want to mess around with absolute positioning or similar.
How can I make a div 100% to the body, even if the parent div is not filling the whole width of the body.
.div {
width: 100%;
height: 6px;
}
Thanks
Use class .container-fluid instead of .container. Bootstrap provide .container-fluid class to make full screen div.
If you are specific to some requirement please share code as well to understand better.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
Good day everyone. I'm a novice with css and I'm trying to float two div tags within one div tag but I'm getting the following
I gave the parent div tag a light grey background so I know something is wrong somewhere as the background has disappeared just after I floated the div tags.
Here's my css below.
.menu.container {
width: 100%;
background-color: #F0F0F0;
}
.category {
float: left;
}
Thanks a lot for your help!
when floating elements the parent container does not recieve information about width or height of the floated elements.
if you just want to align sports and News in a horizinal manner then try the following:
.category {
display:inline-block;
}
"display:inline-block" forms a block element that be on one line with another.