I'm trying to create a slider that I can shift left and right. I only want 3 slides to show, so I set the container's width to the width of each inner slide * 3 and set overflow:hidden. Shouldn't the fourth slide be hidden then? Then later I can just animate the container to have a margin of -110px so slides 2-4 show.
http://jsbin.com/welcome/27336/edit
HTML:
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">shouldn't be here</div>
</div>
CSS:
.container { width: 330px; overflow:hidden; background:#e6e6e6; }
.inner { width: 110px; background: orange; float:left; }
How it renders:
How about setting the height of the elements:
.container {
width: 330px;
overflow:hidden;
background:#e6e6e6;
height:20px
}
.inner {
width: 110px;
background: orange;
float:left;
height: 20px;
}
The container's height adjusts with the inner elements, that's why you see the fourth element
Related
I want to position a dynamic logo (width variable/unknown) next to some content, inside a container (see attached mockup - logo is on the right hand side in green, content is in blue). I specifically want the content div to stretch to the full remaining width of the page as shown in the mockup:
But when I try to float the content to the left and the logo to the right (jsfiddle), the logo gets positioned below the content unless I set the content width to less that 100% (and I can't know the content width because the logo width can vary).
HTML:
<div id="container">
<div id="content"></div>
<div id="logo"></div>
</div>
CSS:
#content {
border: 1px solid green;
height: 300px;
width: 100%;
float: left;
}
#logo {
border: 1px solid red;
width: 50px; /*unknown width*/
height: 50px;
float: right;
}
How do I stretch the content div to the full container width, minus the width of the logo?
Depending on your broswer support requirements, flexbox can do that
.container {
display: flex;
margin-bottom: 1em;
}
.content {
background: green;
height: 100px;
flex: 1;
}
.logo {
background: red;
width: 50px;
height: 50px;
}
.large {
width: 100px;
}
<div class="container">
<div class="content"></div>
<div class="logo "></div>
</div>
<div class="container">
<div class="content"></div>
<div class="logo large"></div>
</div>
This is a possible approach using jQuery:
jsFiddle demo
jQuery:
$(document).ready(function() {
var logoWidth = $('#logo').width();
var docWidth = $(document).width();
$('#content').width(docWidth-logoWidth);
});
CSS:
html, body {
margin:0;
padding:0;
}
#content {
background-color: lightblue;
height: 200px;
width: 100%;
float: left;
}
#logo {
background-color: green;
width: 50px; /*unknown width*/
height: 50px;
float: right;
}
HTML:
<div id="container">
<div id="content"></div>
<div id="logo"></div>
</div>
Source
EDIT: Upon the CSS you provided, I added margin:0; and padding:0 to html,body to be sure the document width represents the actual available space for both DIVs.
In the case that body or html or the container you use do have margin, padding or border, you can use this code instead of the previous one:
jsFiddle demo
jQuery:
$(document).ready(function () {
var logoWidth = $('#logo').width(),
docWidth = $(document).width(),
marginB = $('body').outerWidth(true) - $('body').outerWidth(),
paddingB = $('body').innerWidth() - $('body').width(),
borderB = $('body').outerWidth() - $('body').innerWidth();
$('#content').width(docWidth - logoWidth - marginB - paddingB - borderB);
});
Source
I'm trying to make a floating div have a height that fills in the parent div.
http://jsfiddle.net/sergep/2qPZ2/1/
The structure is as follows:
Parent div______________________
| Middle child
| Left child - float:left
| Right child - float:right
The problem is that the left child has less text than the right, meaning the right increases the height of the parent div (to fit the div), but the left floating div does not follow suit.
The css looks like so:
.bottomcontainer {
bottom: 0;
position: absolute;
width: 100%;
height: auto;
}
.bottomleft {
background: #346CA5;
float:left;
width: 50%;
}
.middle {
background: #FFCE3C;
}
.bottomright {
background: #65B237;
float:right;
width: 50%;
}
How can I make the blue .bottomleft class stick to the bottom of the .bottomcontainer? - I'm trying to make responsive, so I don't want to use actual pixel sizes!
Consequently, how do I make the text inside vertically align middle?
Use display:table-cell; on the child divs, see here for an example that can be extrapolated
I misunderstood the question. You can fix that by adding an extra div around .bottomleft and .bottomright and display it as table / tablecells:
HTML:
<div id="nav"></div>
<div id="container">
<div class="bottomcontainer">
<div class="middle">
<h2>Intro tag line here</h2>
</div>
<div class="bottom">
<div class="bottomleft">
<h2>Tag line here</h2>
</div>
<div class="bottomright">
<h2>Longer tag line goes here</h2>
</div>
</div>
</div>
</div>
<div name="content" id="content"></div>
CSS:
.bottom {
display: table;
}
.bottomleft {
display: table-cell;
background: #346CA5;
opacity: 1.0;
width: 50%;
vertical-align: middle;
}
.bottomright {
display: table-cell;
background: #65B237;
opacity: 1.0;
width: 50%;
}
And updated Fiddle 2
Delete the float, and add an absolute positioning:
.bottomleft {
background: #346CA5;
opacity: 1.0;
position: absolute;
bottom: 0;
width: 50%;
vertical-align: middle;
}
Also check the updated Fiddle.
I have a wrapper div containing a right floated 100% height div and an image.
The image has a width set in %. As you resize the browser window the image height increases and decreased taking with it the height of the wrapper div.
When I set a fixed height on the wrapper div, the right floated 100% height div increases in height as I want it. However, the wrapper div has a dynamic height, set by the current height of the image and the 100% height div, in this instance does not resize vertically as you'd expect.
Is what I'm trying to do achievable?
Here's a pen: http://codepen.io/fraserhart/pen/qiFmb
<div class="wrapper">
<img src="http://i.imgur.com/7v619Ip.jpg" />
<div class="grid">
<section class="row">
<p>Home</p>
</section>
<section class="row">
<p>Looking For Care</p>
</section>
<section class="row">
<p>Working For Us</p>
</section>
<section class="row">
<p>Professionals</p>
</section>
<section class="row">
<p>Who We Are</p>
</section>
<section class="row">
<p>Find a Branch</p>
</section>
</div>
<div class="clear-fix"></div>
</div>
.wrapper{
background:blue;
height:auto;
}
img{
width:60%;
}
.clear-fix{
clear:both;
}
.grid {
display: box;
width:400px;
height:100%;
box-orient: vertical;
background:#ff0000;
float:right;
}
.row {
padding: 20px;
box-flex:1;
background: #ccc;
padding:0px 5px;
border:1px solid #ff0000;
text-align:center;
}
Well, here is one way of doing it, a bit bizarre, probably not to be recommended, but it is a proof of concept, an odd CSS curiosity.
Here is the fiddle: http://jsfiddle.net/audetwebdesign/3tUfC/
Here is the HTML:
<div class="wrapper">
<div class="image-port">
<img src="http://placekitten.com/800/800">
</div>
<div class="content-port">
<div class="grid">
<div class="row">
<img src="http://placekitten.com/100/25">
<p>First...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Second...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Third...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Fourth...</p>
</div>
</div>
</div>
</div>
and here is the CSS:
.wrapper {
outline: 2px dotted blue;
}
.image-port {
outline: 1px dotted blue;
display: table-cell;
width: 60%;
}
.image-port img {
width: 100%;
vertical-align: bottom;
}
.content-port {
display: table-cell;
vertical-align: top;
background-color: wheat;
height: 100%;
width: 40%;
}
.content-port .grid {
}
.content-port .row {
border-top: 2px solid blue;
position: relative;
background-color: rgba(255,255,255,0.5);
overflow: auto;
}
.content-port .row:first-child {
border-top: none;
}
.content-port .row img {
width: 100%;
display: block;
visibility: hidden;
}
.content-port .row p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 0 0 0;
padding: 10px;
}
How It Works
A .wrapper block contains two table-cell elements: .image-port and .content-port,
with relative widths of 60% and 40% respectively. This avoids the problem of having the grid jump beneath the image for small window sizes.
In the .image-port, let the img scale to 100% width to get a good view of the image.
In the .content-port block element, set the position: relative, and optionally, overflow and a few other properties for visual design.
Here is the trick: in each .row, place a image with a certain aspect ratio. I created four rows so my image as a 4:1 aspect ratio. Set the .row img width to 100% and set the visibility: hidden so that the image takes up flexible space but is out of the way. This will allow each row row to change in size as you re-size the window.
Next, place your content in the .row, for example, a p. the content element is position: absolute such that it takes up the full width and height of the .row parent element (set the offset properties to zero).
The rows now have a height that scales with the width of the window. This approach has some flexibility, and though not perfect, may be useful.
Note that if you stretch the window wide enough, the 100x25 images will be their full width and the .grid will move away from the right edge of the wrapper. You can allow for this by using a larger placeholder image, say 1000x250.
If you make the placeholder image as a transparent gif or png, is should be light weight and since you are using the same image multiple times, the browser should really be making one request for it (I think?).
The Quirk about this approach is that how well the grid expands depends a bit on the aspect ration of the image in the image-port. You will need to experiment a bit and try to optimize the various parameters to get a pleasing layout.
I have two divs displayed next to each other, left div is 20% width and right is 80% width.
Now left div contains image which is resized horizontally so it's height is unknown and keeps changing.
Now when this div resizes parent height increases or decreases, so when that happens i need my right div to resize as well, how can i do that?
jsFiddle
You can try the CSS3 table-cell value on the display property : http://jsfiddle.net/UJYyw/5/
With
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
You just have to apply a table-cell display on div.one and div.two
.one, .two{
display:table-cell;
}
Compliant browsers will adapt height of elements the way they do on td and th tags.
You could use jQuery to do this.
$('.container').css({'height':$('.one').height()});
See a jsFiddle here
When you change the value of .one in the css, it will update the size of .container, and thus, .two as well.
Here is the crossbrowser solution which uses just floats and couple of wrappers http://jsfiddle.net/RSPbD/
HTML
<div class="container">
<div class="wrap1">
<div class="wrap2">
<div class="one">text in div one</div>
<div class="two">text in div two</div>
<div class="clear"></div>
</div>
</div>
</div>
CSS:
.container{
border:1px solid;
width:70%;
margin:50px;
padding:10px;
}
.wrap1 {
width: 25%;
background: red;
position: relative;
left: 7%;
}
.wrap2 {
width: 200%;
position: relative;
left: 100%;
margin:0 -200% 0 0;
background: blue;
}
.one{
float: left;
width: 50%;
margin-right: -100%;
position: relative;
left: -50%;
}
.two {
}
.clear {
clear: both;
font-size: 0;
overflow: hidden;
}
Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?
I thought I had done this before with negative margins, but can't get it to work now.
Demo: http://jsfiddle.net/Znarkus/s95uz/
<div id="main">
<div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content">
</div>
</div>
You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;
I've modified your fiddle here: http://jsfiddle.net/s95uz/14/
<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>
<div id="main">
<div id="inside">
<div id="banner">
I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content"></div>
</div>
</div>
Just add overflow : hidden to the div "main" css.
Adding this to an element hides the possible conditional sidebars.
Your new css will look like;
#main {
width: 500px;
margin: 0 auto;
background: red;
position: relative;
overflow:hidden;
}
You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport:
#media only screen and (max-width: 550px) {
#banner { display: none;}
}