Put div in bottom of container wiht dynamic height of content-wrapper - html

I have a css issue.
I have two "columns" where each column contains dynamic content + images at the bottom of each column.
I want these blocks of images to be in the bottom of each column. I could use position:absolute and set a height of each column but I'm looking for a way to achieve this without using a specified height on the columns.
The html is something like
<div class="wrapper">
<div class="content">
{text content / dynamic }
<div class="grid"> <!-- image blocks -->
</div>
</div>
<div class="content">
{text content / dynamic }
<div class="grid"> <!-- image blocks -->
</div>
</div>
</div>

If i understand you truely, you want to align-bottom of container's both right and left side. You can do use display:flex, give a
<div class="wrapper" style="display:flex; width:100%; height:auto; justify-
content:flex-start; align-items:center; "></>
Write your other styling codes, align-items helps you to your content containers align center vertically.

Related

CSS Layout - best way to have a wrapper

Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>

How to center align a div vertically which uses bootstrap?

I have a row with content which should be in the center of the site and a footer at the bottom. The content are divided into two 6 column. i want it to center align vertically according to the screen size. so i tried to give some percentage of top with a position relative but it doesn't work out.
If i give margin-top it is working. In order to make the top we have to give the position, so i have given it relative I don't want position absolute then the footer will come at the top of the site. Other content also will come top i thnik.
How to center align the contents and footer should stay at bottom all time all display size.
HTML
<div class='row'>
<div class='col-md-6 vertical'> content</div>
<div class='col-md-6 vertical'>content right</div>
</div>
<footer>sit at bottom</footer>
CSS
.vertical{
position:relative;
/* margin-top:20%; */ /*works*/
top:20%; /*not works even providing position */
}
JSFIDDLE NOTE: Don't forgot to resize the window then only you can able to see the two column division
<div class='row'>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
</div>
<footer>sit at bottom</footer>
.vertical{
display: table-cell;
vertical-align:middle;
height: 200px /* Accordingly */
}
Working Fiddle Fiddle.
Apart from using display: table-cell, there is one more way to do it but is not so cross-browser at this moment. Take a look at CSS3 Flexbox.

How to create a container that fills up entire screen with no padding in bootstrap 3?

I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>

Javascript - expand div to fit contents but not expand outside of container

Is it possible to do this with CSS? Given the following HTML:
<div class="main-container">
<div class="left">
...
</div>
<div class="right">
<div class="top">
...
</div>
<div class="bottom">
dynamic content
</div>
</div>
</div>
I want bottom to scroll if it overflows the space between top and the bottom of main-container.
How can this be done without specifying the height of bottom?
I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.
The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.
In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.
Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.
Hope this is what you are looking for:
<div class="main-container">
<div class="left" style="float: left; width:33%">
...
</div>
<div class="right" style="float: right; width:66%">
<div class="top" style="height: auto;">
...
</div>
<div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
dynamic content
</div>
</div>
</div>

Can i make this div fill out the remaining space depending on the the sidebars widths?

i have 4 divs inside of a div like this:
<div id="Wrapper">
<div id="CoreSideBar"><!-- a sidebar to the right -->
</div>
<div id="SystemContent">
<div id="SystemNavigation"><!-- will be some kind of "tabnavigation" in the top of this div -->
</div>
<div id="PageContent">
</div>
<div id="SystemSideBar"> <!-- a sidebar to the left -->
</div>
</div>
</div>
I would like the sidebars to have 200px width each and im also going to make it possible to "collapse" the sidebars so you can have more space for the PageContent div if you need it.
What do i need to do to make the PageContent div fill out the remaining whitespace between the CoreSideBar and the SystemSidebar? Is this even possible in all browsers?
Just put your sidebars' markup first, and float: left; or float: right; as desired — the div's default behavior will take care of the rest.
http://css.maxdesign.com.au/floatutorial/tutorial0901.htm
http://phrogz.net/css/understandingfloats.html#incontainers