I was wondering if this were possible, and if it is the best way to go about this:
example image (since I'm not allowed to post pics yet ^^)
So, not only does each column have to be of equal height, but each column also has its own individual footer.
I saw this SO post — how could I rework this technique to apply to the bottom of the divs and not the bottom of the window?
Edit: each column will have content that will constantly change and be of variable height. I'm thinking I could just figure out the equal height columns first, then just absolute position a footer div within those columns. Does its parent div then have to be position: relative?
Looks like a nested div in each that has the same properties. So each outer div is the same size, and so do the inside div.
.outer
{
height:500px;
float:left;
margin-right:20px;
}
.inner
{
height:30px;
width:100%;
margin-top:-470px;
}
<div class="outer">
<div class="inner">
</div>
</div>
Didn't test this; off the top of my head!
Related
I'm trying to achieve an effect like this:
Fixed width adaptive container, two 50% columns. The left column can be constrained by .container, but the right column needs to extend outwards to the edge of the viewport.
Is there a correct way of achieving this with the Bootstrap grid?
What you can do is, for the row where the map needs to be added is introduce a containing element (after the .container closing ) and set position to relative.
Then inside that add another container and row which will maintain the current websites structure. make the map column positioned absolute and right:0 so that it takes up all the space of the viewport on the right.
the map colum should have css something like this:
.make-absolute {
position:absolute;
right:0;
top:0;
}
see a working example here
You need to make your second column a container of your overflowing element
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6 mapContainer">
<div class="map">
OVERFLOWING CONTENT
</div>
</div>
</div>
In the css, turn on the overflow on the container, and give a width to your map.
.mapContainer {
overflow: visible;
}
.map {
width:50vw;
}
That should do it.
http://codepen.io/anon/pen/gawOeB?editors=110
Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/
When I put a scrolling div (i.e. <div style="width:200;height:200;overflow-y:scroll;">) inside of another div that has an overflow attribute it treats the second div like I don't have dimensions set (height 200 and width 200). The scroll bar on the right shows up but it wont work because every time I add content the div just drops instead of making it scroll.
First divs css:
#slide1_container
{
width:976px;
height:520px;
overflow:hidden;
position:relative;
margin:0 auto;
}
Nested div:
overflow-y:scroll;
You're missing the px on the dimensions in your div's inline styles.
<div style="width:200;height:200;overflow-y:scroll;">
Should be
<div style="width:200px;height:200px;overflow-y:scroll;">
Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}