I can't seem to figure this out.
I have the following code:
<div id="wrapper">
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
//
</div>
I want the div #wrapper to of fixed width. And I want each .schedule to be also of a fixed width. I then want, it I have too many in the div, I could just scroll left and right inside that page.
I can't do this!! No matter what I try, when I add more .schedule, they pop to the bottom of the page, and start filling the next row!
Cheers
Kousha
EDIT: Thank you. All the results work. EXCEPT I need to be able to use float: left; or something so that all divs are stock to each other! How can I do that?
It can be done with the following CSS:
#wrapper {
overflow-x: auto;
white-space: nowrap;
max-width: 300px;
border: 1px solid red;
}
#wrapper .schedule {
display: inline-block;
padding: 5px;
}
I've put together a basic JSFiddle demonstration.
Live Demo
Hi now used to this css
#wrapper{
min-width:200px;
background:red;
font-size:0;
white-space:nowrap;
}
.schedule{
height:100px;
font-size:12px;
width:100px;
background:green;
margin:1px;
display:inline-block;
vertical-align:top;
}
Demo
Now change to width or height according your layout .........
I suspect what you want is the schedule-divs to float to align themself on the same height.
Try adding this to your css:
#wrapper{overflow:auto;}
.schedule{float:left;}
Sorry if I missunderstod your specification, but I think that's what you really want.
Related
I have set up 2 div tags, the outer one with display:table and the inner one with display:table-cell. Inside these I have an image.
When I resize the box using jQuery UI's resizable() API, I am unable to shrink it smaller than the image.
Markup:
<div class="resizebox">
<div class="content">
<img src="http://placehold.it/300x60">
</div>
</div>
CSS:
.resizebox {
border:1px solid black;
height:100px;
width:320px;
overflow:hidden;
display:table;
}
.resizebox .content {
display:table-cell;
vertical-align: middle;
text-align: center;
}
jsFiddle
I've added another example under the top resizable box to demonstrate the kind of behavior I'm trying to achieve (while keeping the CSS Table)
You beat me to it. Just using regular 'ol width: 100%;
img {
width:100%;
}
Fiddle Example
Try adding the following css
.resizebox .content img {
width:100%;
max-width:100%;
}
JsFiddle
Feeling a big silly now.
Fixed this by adding these CSS Styles:
.resizebox img {
max-width:100%;
max-height:100%;
}
jsFiddle
I am trying to align two divs horizontally and I got it to work using display:inline-block
however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
Here's fiddle
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}
give parameters to width and height, so container can overflow.
http://jsfiddle.net/f5HWD/3
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
I altered your code slightly and made the contents float left.
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
Fiddle
Hope it helps.
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>
I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:
clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
The result is:
Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?
note:- I don't want to give position:fixed to make it stick to bottom.
Well, the short answer is, You Can't!
The longer answer? You can fake it.
Why can't you?
Because a block level element is not able to strech and fill a space in height.
Fake it how?
Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).
You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.
For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…
This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):
Put this in your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Then in your index/master/_layout/whatever:
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.
This is what did it for me:
footer{
padding-bottom:10px;
}
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}