I've got two div elements in my webpage and I've included the CSS for the two elements.
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
When I re-size the browser for various resolutions the item-browsing element goes down. I've attached a screen shot of what I mean above.
How Can I fix this issue using CSS.
Thank you.
Give parent element of these two elements position: relative and change the following css related to #item-browsing.
#item-browsing {
height: 500px;
position: absolute;
right: 315px; /* or left */
left: 0;
top: 0;
bottom: 0;
min-width: 915px;
}
BTW, there are many posts based on this issue on SO.
Working Fiddle
Just put a wrapper around those two divs. like so:
#wrapper{
width: [your width];
clear: both;
padding: 0;
overflow: hidden;
}
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
Add a wrapper and set it's min-width with sum of width of both containing divs:
#wrapper {
min-width: 1230px;
}
Simplified demo
If the browser width is less than 915 (min-width)+315(width)=1230px the second div has no space on the right side.
Related
I have div of fixed size height:45px and width:60px and no other css to div. This div used to show the image uploaded by customer. I want to give the dimensions of image so that the uploaded image will be fit in given div perfectly. I need to give the optimized size so that image will look good in div. First logic I tried to give the image with 45 by 60, 90 by 120 like.
What is the correct way to solve this.Please guide.Thanks in advance.
div {
width: 160px;
height: 145px;
overflow: hidden;
border: 1px solid black;
}
div img {
width: 100%;
min-height: 100%;
}
<div>
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/>
</div>
Best thing is the following:
#div-to-contain-image img {
display: block;
height: auto;
min-width: 100%;
width: 100%;
}
This will render the image the best as possible. If you need to cover the containing div entirely, you could do the following:
#div-to-contain-image img {
display: block;
height: 100%;
width: 100%;
}
I have multiple solution for you image thumbnail setting. Maybe it will be helpful for you.
Solution #1:
Image vertical and horizontally center inside div
.thumb-container {
position: relative;
width: 60px;
padding-bottom:45px; /* padding is using for the height of image */
margin: 0px;
overflow: hidden;
border: 1px solid black;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div>
</div>
View on Jsfiddle https://jsfiddle.net/5az8u7bj/
Solution #2: Image vertical and horizontally center width:100% inside div fully cover image box no white space
.thumb-container {
position: relative;
padding-bottom:45px;
margin: 0px;
overflow: hidden;
border: 1px solid black;
width:60px;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
height:100%;
margin: auto;
width: auto;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div>
</div>
View on JSfiddle https://jsfiddle.net/2d6x3fn6/1/
Maybe these solution will be helpful for you
I'm trying to work out how to work with img divs on a grid. The background image of this grid contains a border, when I try to inspect the element element, the img divs start from the absolute top-left hand corner instead of slightly away from on the actual checkerboard patterned image, which has a thick border around it (950 * 500 - 18 columns wide by 9 rows). Does anyone know How I could tackle this problem?
CSS
body
{
background: #000000 url('gfx/bg.png') 0 0 no-repeat;
position: absolute;
width: 1280px; height:720px;
margin: 0; padding: 0;
overflow: hidden;
font-family: tivo-normal;
text-align: center;
color: #FFFFFF;
}
#GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}
#GameGrid > div
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
float: left;
}
#GameGrid > div > img
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
}
If I calculate by the values you are given: 18 columns each 52px wide that makes it 936px and your GameGrid is 950px. So I am assuming the 14px are taken by the border i.e. 7px each side
So, you can just add a padding in GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
padding:7px;
}
Set specific top,right,bottom,left paddings if they are required specifically.
you can add the cellpading="0" attribute to your tag. You can also add a CSS rule to prevent padding, something like:
#GameGrid td, #GameGrid th{
padding:0px;
position:relative;
}
and maybe add top:0px; to your #GameGrid > div > img. An example could help us to understand better your problem :-)
Resorted to modify the image file and removed the border around the grid. Created another div with an image of just the grid border and aligned it to the grid div.
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.
i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?