I'm trying to implement some bootrap css - I don't want the entire css so i've just copied some css for certain components such as alerts and the media component.
However the media-right css doesn't seem to work. I have the following:
<style>
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media, .media .media {
margin-bottom: 15px;
position: relative;
padding: 20px;
border: 1px solid #ddd;
}
.media-body,
.media-left,
.media-right {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-left,
.media > .pull-left {
padding-right: 25px;
}
.media-right,
.media > .pull-right {
padding-left: 25px;
}
.media-object {
display: block;
}
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
.media-body p {
margin: 10px 0px 10px 0px;
}
<div class="media">
<div class="media-body">
<h4 class="media-heading">
Football
</h4>
<p>xyz</p>
</div>
<div class="media-right" style="width:200px">
<img class="media-object" src="xyx" alt="">
</div>
</div>
The image is to the right of the media-body but when there isn't enough content the image looks like it's in the middle.
Is there some css I'm missing or how do i ensure the image is to the right even when there is no content?
You need to import the CSS from the #media too, there are some pull-right and pull-left classes there. It should fix your problem for different size of screens.
Related
I am trying to display an outer div with an image on the left and another div with some text to the right on it. I use:
img {
float: left;
}
div.out {
background-color: blue;
padding: 10px;
}
div.in {
background-color: yellow;
padding: 5px;
}
<div class="out">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">
Flowers<br>are<br>cool
</div>
</div>
Code works almost fine as shown below but how can I make the first blue div extend to the very end of where the image ends? Also, how can I add a 10px space let's say between the image and the text? (And also, is my way of adding float: left; to the img the best way to display it to the left or is there a better way?)
Thanks a lot
img {
display: inline-block;
}
div.out {
background-color: blue;
padding: 10px;
display: flex;
}
div.in {
display: inline-block;
width: 100%;
background-color: yellow;
padding: 5px;
}
<div class="out">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">
Flowers<br>are<br>cool
</div>
</div>
I recommend you should learn how to use flex
You can use the flexbox model for this. Remove the float and on the outer div use display: flex;, and the inner div flex-grow: 1;:
#flexbox_container {
display: flex;
background-color: blue;
padding: 10px;
}
div.flex_item {
background-color: yellow;
padding: 10px;
flex-grow: 1;
}
<div id="flexbox_container">
<img class="flex_item" src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="flex_item item_selected">
Flowers
<br>are
<br>cool</div>
</div>
img {
float: left;
}
div.out {
background-color: blue;
padding: 10px;
}
div.in {
background-color: yellow;
padding: 5px;
}
.clr {
clear: both;
}
<div class="out">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">
Flowers<br>are<br>cool
</div>
<div class="clr"></div>
</div>
If you're looking for the blue box to extend to the end of your floated content, your looking for a clear fix. See the minor change above with the added div with class clr.
-- Edit of all edits --
Realized after doing what you asked... it probably wasn't EXACTLY what you meant to ask. But I got the blue box to extend to where the image ends haha.
display:flex don't support in IE9 and earlier, So i use of other way :
.out {
background-color: blue;
padding: 15px;
}
.content {
background-color: yellow;
}
.content:after {
content: '';
display: block;
clear: both;
}
.in {
padding-top: 5px;
}
img {
float: left;
margin-right: 5px;
}
<div class="out">
<div class="content">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">Flowers<br>are<br>cool</div>
</div>
</div>
So I have a box on my website, which has a title and an image to the right. The issue is that when the width of the screen is too small the image gets pushed down. Instead what I want is that the title breaks to a new line.
I've tried using maxwidth on the h2, and various other options with display, width and position but I can't get it to work. I feel like there should be a trivial solution, but I haven't been able to find it.
HTML
<div class="projects-container">
<h2>Title that gets too long</h2><img src="img/ddicon.jpg" width="30px">
<div id="website">
<p>I like to build websites, I would like to be better at it. So then this happened.</p>
</div>
</div>
CSS
.projects-container {
border: 5px solid black;
border-radius: 20px;
padding: 10px;
margin-bottom: 20px;
}
.projects-container > h2 {
margin: 5px 0px;
display: inline;
}
.projects-container > img {
float: right;
}
You will need to make 2 simple changes.
1- Place <img> first in HTML.
<div class="projects-container">
<img src="img/ddicon.jpg" width="30px">
<h2>Title that gets too long</h2>
</div>
2- Remove display: inline and add overflow: hidden:
.projects-container > h2 {
margin: 5px 0;
overflow: hidden;
}
As you are using float on child elements, so don't forget to set layout of parent element. There are many ways of setting layout. For example:
.projects-container {
overflow: hidden;
}
Or
.projects-container:after {
display: block;
clear: both;
content: '';
}
.projects-container {
border: 5px solid black;
border-radius: 20px;
padding: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.projects-container > h2 {
margin: 5px 0px;
overflow: hidden;
}
.projects-container > img {
float: right;
}
<div class="projects-container">
<img src="img/ddicon.jpg" width="30px">
<h2>Title that gets too long</h2>
<div id="website">
<p>I like to build websites, I would like to be better at it. So then this happened.</p>
</div>
</div>
width add with calc function
.projects-container > h2 {
margin: 5px 0px;
display: inline-block;
width:calc(100% - 35px);
}
https://jsfiddle.net/sjmxd9f4/
There is a strange effect with the css setting that has come with the latest chrome version.
Do you've an idea why the second box is below the first one (see image) ?
display: inline-block;
some help is welcomed.
If you want the boxes to anchor to the top you can use the CSS vertical-align: top property.
Here is the example,
Please view it in a full screen mode so that the boxes appear side by side.
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
vertical-align:top;
}
.ic3a-mini-box {
height: 100px;
margin: 15px;
padding: 20px;
background-color:#990033;
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
Actually its working fine as expected only, when it is coming below means when container width reduce by the screen why because you given width: 100%; to the parent and given fixed width to the child elements, still you want that side by side only give white-space: nowrap; to the parent element.
There is an another way too, you can you give display: table; to the parent element and for child's give display: table-cell;. It wont come down anymore
Displaying inline block does exactly as it says, if in your markup you have any spaces it will render these spaces as well (the white space - it is supposedly a bug - i see it as a bug as inline should butt up next to each other), example is what you have displayed. With the width of both of the boxes and the space next to them will result in the boxes breaking down.
There are a few ways to remove this:
<div>Element</div><!--
--><div>Element 2<div>
or you can do:
<div>Element</div><div>Element</div>
Will result in the blocks showing inline next to one another. Another way to combat this is to use a negative margin:
.class{
margin-left: -3px;
}
There is also the workaround of setting the parent element to:
font-size: 0;
or
white-space: nowrap;
I would recommend using flexbox on the parent element personally, as this will stop your line break from happening.
You can read more on this here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
}
.ic3a-mini-box {
height: 100px;
/* margin: 15px;*/
padding: 20px;
background-color:#990033
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
I just have removed margin:15px from ic3a-mini-box class.
You can check in browser and see you get the result as expected or not?
Hope this helps.
I'm laying out a product page in HTML. My attempt to make the desc below the photo take up the width of the photo was to use absolute positioning. This worked well until I got a longer desc and I remembered it takes the element out of the flow causing the problem below. How should this be done?
I could not find a question that included the vertical and dynamic aspects of my question. If you are closing this as a dup please provide a link.
More details: At the top it has a div "item details" with two columns. Left column has a photo of variable height/width. Below that I have a text description of variable size that I want exactly as wide as the photo. Right column is "item details" with a max-width div. Below all of that I have more divs which should take the entire width.
Live url: http://www.morphmarket.com/snakes/ball-pythons/14074
HTML
<div class="detail-container">
<div class="item-details">
<div class="image-col">
<div class="image">
...
</div>
<div class="desc">
<b>Description.</b> {{ snake.desc }}
</div>
</div>
<div class="details-col">
...
</div>
</div> <!-- item details -->
<div class="store-details">
...
</div>
</div> <!-- item container -->
<div class="more-from-store">
...
</div>
CSS
.snake-page {
.detail-container {
margin-top: 10px;
//display: table-cell;
width: 100%;
.item-details {
display: table-row;
//display: table;
//width: 1px;
.image, div.desc, .details-col {
.white-box();
margin: 10px 0px;
}
.image-col {
display: inline-block;
position: relative;
.image {
position: relative;
.sold {
size: 10rem;
}
.img-thumbnail {
}
}
div.desc {
max-height: 150px;
padding: 10px;
position: absolute;
overflow:auto;
left: 0px;
right: 0px;
margin: 0 0 10px 0;
}
}
.details-col {
.title {
font-weight: bold;
font-size: 1.4em;
text-align: center;
margin-bottom: 10px;
}
font-size: 1.20em;
max-width: 400px;
padding: 10px;
margin-left: 10px;
display: inline-block;
//display: table-cell;
vertical-align: top;
background: #white;
.details {
.dl-horizontal {
#width: 120px;
dt {
width: #width;
}
dd {
margin-left: #width + 20px;
}
}
.label.trait {
margin-right: 0px;
}
}
.button-col {
div {
margin: 0 auto;
width: 85%;
}
}
}
}
.store-details {
display: table-cell;
width: 1px;
> * {
.white-box();
margin: 0 0 10px 0;
padding: 10px;
}
.store-policy {
}
.about-store {
}
}
} // detail container
}
I couldn't find documentation that says this, but we can see that a table-caption element takes the width of its containing table (as opposed to stretching out based on its own amount of text like a block element does).
Paste this at the bottom of your CSS file to see it in action (I overrode the properties that are in the way. If you adopt this solution you can merge the styles of course).
.snake-page .detail-container .item-details .image-col {
margin-top: 10px;
}
.snake-page .detail-container .item-details .image-col .image {
display: table-row;
}
.snake-page .detail-container .item-details .image-col div.desc {
position: static;
display: table-caption;
caption-side: bottom;
margin-top: 5px;
}
My solution makes both elements table related elements, the description into a table-caption and the image into a table-row, so they basically act as one table. By giving the description caption-side: bottom I moved the description to the bottom of the table.
I'm thinking you can do this by setting rows and cols with Bootstrap and vary the sizes for the cols based on what you need. Like this: http://jsfiddle.net/4d5WR/124/
For example, for the image,
<div class="row">
<div class="col-lg-3">
<div class="image">
<img src="http://www.pet-care-portal.com/images/BallPythonT3Pic1.jpg">
</div>
</div>
</div>
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?