basically what i need is:
3 columns (for an example col-ms-4)
inside each of the columns i need a div
inside the div:
the top half of the div an responsive image and the bottom and
i cant manage to make the image half of the div and responsive
<div class="col-sm-4">
<div class="service-box">
<img class="service-box-img img-responsive" src="something">
<h2>Header</h2>
sdfsdfdfdsfsdfdsfdf
</div>
</div>
css:
.col-sm-4{
padding-left:100px;
padding-right:100px;
height:300px;
}
.service-box{
background-color:white;
padding:30px;
padding-left:100px;
}
.service-box-img{
height:150px;
}
Try adding a
.col-sm-4 img {
width: 100%
}
Related
I am trying to get three pictures to take up 100% of the page equally. I have the width fixed with this basic code:
<style>
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
width:100%;
}
.inner {
width:101%;
overflow:hidden;
}
.column {
width:33.33333333%;
float:left;
}
.column img {
width:100%;
height:auto;
}
</style>
<div class="container">
<div class="inner">
<div class="column">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
<div class="column">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
<div class="column">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
</div>
</div>
Here is the fiddle: http://fiddle.jshell.net/xbtjzof8/
What I am trying to do is get the images to take up 100% of the height as well as the width, with it zooming in to fit. But I am having problems with that part.
EDIT: Something like this: http://i.imgur.com/7KD6KcU.jpg But with three images. Or like http://www.raysrestaurants.com/index without the side nav sections of course.
If I understand what you want, you can do this by forcing the height of the image at 100% , leaving the width as it is and be sure to have an overflow-hidden on the column that contains the image, so it will do the trick.
Here the fiddle :
http://fiddle.jshell.net/Lbeax6ju/2/
You were looking for that ?
Edit: and as I forgot to say, also so what thathungerstar said.
Not perfect but it works:
html, body, .container, .inner, .column, .column img {
height: 100%;
}
Percentage heights only work if the parent element has a height set on it. In this case we keep "cascading" height: 100% down to the image.
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
I'm using the twitter bootstrap and I am having a hard time figuring out how to separate the background color of two columns that are inside of a main container div, yet have it go full-width.
Here is a fiddle of what I have so far: http://jsfiddle.net/seeplanet/ZTbwz/
My main problem is that I want to have the two columns centered on the page and not extending to either side. That is why I have the max-width set on the container.
My HTML:
<div id="featured-content">
<div class="container">
<div class="row">
<div class="col-sm-9">
Featured Video or Image Gallery
</div>
<div class="col-sm-3">
Other Information
</div>
</div>
</div>
</div>
My CSS:
#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}
.container {
max-width: 960px;
margin:0 auto;
}
.col-sm-9{
width:75%;
float:left;
background:yellow;
}
.col-sm-3{
width:25%;
float:left;
}
}
And this is what I would like it to look like:
Add display:table; to your container like this:
.container {
max-width: 360px; /* If I remove this, then it works, but then my content is not centered */
margin:0 auto;
display:table;
}
JS Fiddle
http://jsfiddle.net/grrenier/3TE4X/1/
Try this other JS Fiddle:
http://jsfiddle.net/grrenier/3TE4X/2/
I'm building responsive website and have a problem with aligning div.button to align with bottom side of the image.
Here is the code: http://jsfiddle.net/E22nq/
I would like to have div.button aligned with image, and dynamically hide text in div#text so that the width of the div.content is dependent on image (image height depends on the width of the browser).
HTML:
<div class="content">
<div id="left">
<img src="" />
</div>
<div id="right">
<div id="text">...</div>
<div class="button">BUTTON</div>
</div>
</div>
CSS:
.content {
width: 100%;
}
#left {
width:50%;
float:left;
}
#right {
width:50%;
float:left;
}
img {
width:100%;
}
try using
#right {
width:50%;
float:left;
clear:left;
}
I have an overflow-x:scroll and overflow-y:hidden. I have images, but when I'm trying to make it only scroll horizontally, it doesn't work? When I highlight the images and drag the highlight downwards, its scrolls down vertically.
#contents
{
margin:0 auto;
text-align:center;
width:1200px;
clear:both;
}
#image_contents
{
float:left;
height: 208px;
overflow-x:scroll;
overflow-y:hidden;
margin:0 auto;
}
.images
{
float:left;
margin:2px;
background:#000;
overflow:hidden;
position:relative;
display:inline-block;
}
<div id="contents">
<div id="image_contents">
<div class="images">
<img src="1.jpg"/>
</div>
<div class="images">
<img src="2.jpg"/>
</div>
<div class="images">
<img src="3.jpg"/>
</div>
<!-- and so forth !->
</div>
</div>
The best way to do this, to my knowledge, would be to create another div inside the image_contents div. Then give this div the width of all the images (with JavaScript if necessary).
Another solution would be to use display:table-cell on the images inside another div with display:table-row.
Or (dare I say it) use a table.