I have a three column layout with a container "three-col"
In the right column I have a "Feature Tile" which is basically a 220px wide placeholder with editable content.
I need the "Feature Tile" To move with the "three-col" container, so if the content expands in height, I need the feature tile to move down with it...
May need Jquery - not sure.
Thanks!
EDIT: I want the feature tile to always be positioned at the bottom. Move = The div will expand in height based on how much content is inserted - no fixed height
Try this:
.right-column {
position:relative;
}
.featured-tile {
position:absolute;
bottom:0;
}
This will keep .featured-tile at the bottom of .right-column no matter what height it is due to variable content.
UPDATE: I think I know what you mean, try this instead.
.three-col {
position:relative;
}
.featured-tile {
position:absolute;
bottom:0;
}
This will keep .featured-tile at the bottom of .three-col
Demo: http://jsfiddle.net/wesley_murch/4FKhm/4/
Have you considered a 2-column layout with the second column being a div with another two columns in it?
Related
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
Take a look at this fiddle. I've got divs on either side, with fixed widths of 50px, and display:inline-block.
I want the div on the inside to expand to fill the gap between these two divs, but the problem is if I put lots of text inside this div it pushes itself onto the next line, and the layout breaks down.
Also, I want it so the middle div will fill the space even if there is a small amount of text in it (less than the page width).
How can I ensure the left and right divs are always on the left and right, and that the content div always fills the space in between them?
I tried using CSS3's calc, but it appears that it isn't very well supported.
This is the sort of situation that was handled in the past by using tables for layout. This will be fixed in the future by the new Flexbox implementation https://developer.mozilla.org/en-US/docs/CSS/Flexbox
In the meantime, you can emulate the table effect by using display: table-cell, this will cause each div to stretch the way you would expect a table to. If you want more control over the total width you can wrap it in a div that has a display: table-row and a set width.
.col {
background-color:#333;
color:#EEE;
width:50px;
display:table-cell;
}
.middle {
background-color:#EEE;
color:#333;
display:table-cell;
}
If you are open to using javascript, this will work:
$(function(){
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
$(window).resize(function() {
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
});
});
Working JSFiddle:
http://jsfiddle.net/vh8Zu/
I have a site which has several different options for left and right containers and a centre.
The left div is always the same size, however some times it's not shown.
The right has 3 options, small, normal or wide. Only one rightside will be shown at once, but some times there's none.
The center should adjust to the left as well as the right side taking up as much space as possible but not push the right div to a new line (as it does with width:100%)
Is this at all possible? Having a div just, doing what you want it to do without having to tell it how?
I made an example in Fiddle in case my explanation was unclear: http://jsfiddle.net/WDZFx/13/
Thanks in advance!
Jennica, here's a sample http://jsfiddle.net/uQ4TH/ , but it has the same problem I mentioned earlier, the center one will expand only according to the contents, though the maximum possible will be 50%;
Make use of percentages instead of specifying the individual widths for the left/center/right:
Modify your css as:
#Wrap {
width:100%;
}
#Left {
width: 10%;
float:left;
background-color:pink;
}
#Center {
width: 30%;
float:left;
background-color:beige;
}
#Right {
width:60%;
float:left;
background-color:silver;
}
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}
I have a 3 column table layout with the center column being position:relative;
inside the center column I have a form which needs to be position:fixed; (well, unless there is another way)
What I need is the form to have a liquid width when the browser widens, but it also needs to stick to the bottom of the page. So, if I use position:fixed; it stays at the bottom, but it overlaps the right sidebar. If I use position:relative; it stays between the sidebars like it should, but it scrolls with the page.
I made a little jsfiddle but it doesn't display fixed positioning. But you can see my code. http://jsfiddle.net/winchendonsprings/S5zkm/1/
Here you can see it overlap the right sidebar. http://i.imgur.com/awp07.png
#center {
padding: 0 15px;
background-color: green;
position:relative;
}
div.main {
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
You can try that (absolute positioning within relative positioning parent).
Play with the top and bottom values to position it vertically.
(It should resize with the window horizontally).
Is that what you want?