I have placed two divs inside a container tag. The container simply centers and fixes the content.
I want to have space at the bottom of the site, between home-segment and the bottom of the browser. For some reason however, the bottom-spacer floats above home-segment. How can I move it down below home-segment?
<div class="container">
// Content
<div class="home-segment">
<div class="col w33 col-first">
<h2>A title</h2>
<p>Lorem ipsum.</p>
</div>
<div class="col w33">
<h2>Hey there.</h2>
</div>
<div class="col w33 col-last">
</div>
</div>
<div class="bottom-spacer"></div>
</div>
CSS:
/* Home Page Columns */
.home-segment { width: 830px; float: left; }
.col-first { margin-left: 0 !important; }
.col.w33 { width: 220px; min-height: 200px; max-height: 200px; border: 1px solid #D9D4D4; background: #fff; margin-right: 15px; }
.col.w33 h2 { font-size: 18px; margin-bottom: 10px; }
.col-last { margin-right: 0 !important; }
.col { display: block; float: left; position: relative; overflow: hidden; padding: 10px; }
.bottom-spacer { padding-bottom: 25px; }
It is shifting to the top as you are not clearing your floated elements
Add clear: both; to .bottom-spacer
.bottom-spacer { clear: both;padding-bottom: 25px; background: #f00;}
Demo
For detailed explanation for the behavior, you can refer my answers here and here
Related
I know this is a commonly answered question, but for some reason nothing I've tried has worked from the other Stackoverflow posts. I'm trying to have two sidebars on my website with one on each side of the main content.
I've tried using float right and float left. Block vs. inline-block etc... I'm not sure whether the the main contents should float or not. I'm using the latest google chrome browser.
HTML:
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
<div id="mainContents">
<div class="center-div" style="width: 700px;">
<h1">This is some content</h1>
</div>
<div class="center-div" style="width: 900px;">
<h1>More content</h1>
</div>
</div>
</div>
CSS:
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}
#sidebar {
position: fixed;
float: left;
width: 200;
margin: 5px;
margin-left: 15px;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#sidebar2 {
position: fixed;
float: right;
width: 50px;
margin: 5px;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#mainContents {
float: right;
width: calc(100% - 300px);
margin: 0px;
padding: 5px;
padding-top: 20px;
}
Both the sidebars appear on the left side in the same position. The best I've gotten is the sidebar2 floats right of the sidebar and the contents float right of that.
You can do this using flexbox here is the working fiddle:
and also i have removed unnecessary css.
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
display:flex;
}
#sidebar {
width: 20%;
margin: 5px;
padding: 5px;
margin-top: 20px;
}
#sidebar2 {
width: 20%;
padding: 5px;
margin-top: 20px;
}
#mainContents {
width: 60%;
margin: 0px;
padding-top: 20px;
}
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="mainContents">
<div class="center-div">
<h1>This is some content</h1>
</div>
<div class="center-div" >
<h1>More content</h1>
</div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
</div>
Note: there is mistakes in html and css which i have corrected:
your code is almost correct just remove position:fixed and give proper width considering your screen as 100%
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}
#sidebar {
float: left;
width: 15%;
margin:1%;
padding: 5px;
margin-top: 20px;
}
#sidebar2 {
float:right;
width: 15%;
margin: 1%;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#mainContents {
float: left;
width:59%;
margin: 0px;
padding: 5px;
padding-top: 20px;
}
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="mainContents">
<div class="center-div" >
<h1>This is some content</h1>
</div>
<div class="center-div" >
<h1>More content</h1>
</div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
</div>
I'd like to have in a single line text and 3 divs, in the second line another text and three more divs etc.
Currently that's how it looks like
and my code is
svg {
margin-left: 0%;
float: left;
height: 12%;
width: 28%;
}
h2{
left: 2%;
font-size: 2em;
padding-top: 180px;
top: -40px;
}
I cannot use class names because each div has a different one, that gets dynamically, and there are more than thirty divs. That's why I'm trying to fix it by using the h2 and div as elements.
I managed with this code
div {
margin-left: 10px;
float: right;
bottom: 1852px;
position: relative;
height: 12%;
width: 28%;
}
h2{
left: 2%;
position: relative;
font-size: 2em;
padding-top: 180px;
top: -40px;
}
to achieve what I'm trying
but it is different in different screens. Sometimes display 4 divs and other times 2 divs. I tried position: fixed but couldn't make it. I'm not familiar with css and I'm really struggling on this.
Create divs with percentage.
Or you can use calc() for calculate margins for box.
.box-container {
border: 1px solid #500;
}
.box {
display: inline-block;
width: 20%;
}
.box-text {
display: inline-block;
padding: 10px;
box-sizing: border-box;
width: 40%;
}
.content {
box-sizing: border-box;
border: 1px solid red;
}
.inner {
margin: 10px;
padding: 10px;
background-color: #CCC;
}
Other solution is create another div inside div box and add margins.
Use display:table, display:table-row and display:table-cell combination as follows and keep elements perfectly in place.
html, body {
height: 100%; /* just in case you want it to span whole height */
margin: 0; /* otherwise dont use this */
padding: 0;
}
div.table {
display: table;
width: 100%;
height: 100%; /* just in case you want it to span whole height */
/* otherwise use a custom height */
}
div.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 10px; /* creating gaps */
vertical-align: middle; /* aligning to middle */
}
div.table-cell {
width:25%; /* width of the content parent */
}
div.content {
background-color: grey;
height: 100%;
}
<div class="table">
<div class="table-row">
<h2 class="table-cell">text 1</h2>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
</div>
<div class="table-row">
<h2 class="table-cell">text 2</h2>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
</div>
<div class="table-row">
<h2 class="table-cell">text 3</h2>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
<div class="table-cell"><div class="content"></div></div>
</div>
</div>
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.
I would like to have a main element, with side blocks floating to its right side. I don't know the number of side blocks, neither their final total height. But my main element should have the same height (see the following example for better understanding), without using columns.
(dashed areas are real contents)
To force my main (red) element to fit side blocks height, I use this trick:
padding-bottom: 5000px;
margin-bottom: -5000px;
This works well, but side blocks doesn't care of padding, they just ignore it.
How can I get them to take padding into account?
N.B: HTML markup should not be changed, and I'm not willing to use JS for layout purpose
.container {
width: 600px;
margin: 0 auto;
overflow: hidden;
}
.main {
float: left;
background: tomato;
width: 440px;
padding-bottom: 5000px;
margin-bottom: -5000px;
}
.side {
float: left;
background: forestgreen;
height: 50px;
width: 150px;
margin-left: 10px;
margin-bottom: 10px;
}
<div class="container">
<div class="main"> </div>
<div class="side"> </div>
<div class="side"> </div>
<div class="side"> </div>
</div>
How is this for an option?
No markup change and purely CSS with no change in absolute values already given.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
overflow: hidden;
}
.main {
background: tomato;
width: 440px;
padding-bottom: 5000px;
margin-bottom: -5000px;
float: left;
}
.side {
background: forestgreen;
height: 50px;
width: 150px;
margin-left: 10px;
margin-bottom: 10px;
float: right;
clear: right;
}
.side:last-child {
margin-bottom: 0;
}
<div class="container">
<div class="main"> </div>
<div class="side"> </div>
<div class="side"> </div>
<div class="side"> </div>
</div>
The only way i can come up with a solution is this:
JS FIDDLE
I made a .wrapper div around the 3 (forest)green boxes, and centered that one to the right.
So now you have those 3 boxes floating right of the tomato colored div.
Don't forget to make a clear both under the floating divs, or else everything will overlap the divs. and in you CSS sheet: .clear{ clear: both; }
Hope it helps. :)
I found a solution, using margin-left instead of float: left:
.container {
width: 600px;
margin: 0 auto;
overflow: hidden;
}
.main {
float: left;
background: tomato;
width: 440px;
padding-bottom: 5000px;
margin-bottom: -5000px;
}
.side {
background: forestgreen;
height: 50px;
width: 150px;
margin-left: 450px;
margin-bottom: 10px;
}
<div class="container">
<div class="main"> </div>
<div class="side"> </div>
<div class="side"> </div>
<div class="side"> </div>
</div>
When you float an element, it's effectively taking it out of the document flow, so padding won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.
How to stretch parent div to fit children div?
I tried to add element with clear: both; after content but it didn't work for me.
HTML:
<div id="wrapper">
<div class="left-menu">
</div>
<div class="right-bar">
<div class="right-content">
<div class="content">
<div class="content-wrapper">
<div class="content-body">
Here is content
</div
</div>
</div>
</div>
</div>
</div>
CSS:
.left-menu {
background-color: #0B0C0E;
width: 20%;
height: 100%;
float: left;
}
.right-bar {
background-color: #F0F0F0;
height: 100%;
width: 100%;
}
.right-content {
float: left;
width: 80%;
}
.right-content > .content {
padding: 21px 0 0 42px;
}
.right-content > .content > .content-wrapper {
width: 98%;
height: 70%;
}
.right-content > .content .content-body {
background-color: #FAFAFA;
padding: 20px;
font-size: 24px;
border: 1px solid #D0D0D0;
}
sandbox for test: http://roonce.com/en/room/SwZuEJYB
Thanks in advance.
Use "clear-fix" technique. http://css-tricks.com/snippets/css/clear-fix/
This will allow the parent div to be the appropriate size of the floated elements within. Note this works specifically on #wrapper. (http://jsbin.com/huqehuta/1/edit)
.clear-fix:after {
content: "";
display: table;
clear: both;
}