How do I stop this top banner from overlapping the main content when the browser window is made smaller. Currently I have the main content set 110px from the top but I'd rather it just be spaced dynamically depending on the size of the banner.
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #b4ecb4;
width: 100%;
overflow-x: hidden;
}
div#banner-content {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0px solid #000;
}
div#main-content {
padding-top: 110px;
}
<div id="banner">
<div id="banner-content">
<center>
<h1>
<big>
My name
</big>
</h1>
<small>
<p>sub heading here</p>
</small>
</center>
</div>
</div>
<div id="main-content">
<center>
<p>Main page content goes here</p>
</center>
</div>
Set <body> to display: flex and flex-direction: column. Give the banner position: relative and remove overflow-x: hidden.
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
div#banner {
position: relative;
top: 0;
left: 0;
background-color: #b4ecb4;
width: 100%;
/* overflow-x: hidden; */
display: block;
}
div#banner-content {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0px solid #000;
}
div#main-content {
/* padding-top: 110px; */
overflow-y: auto;
}
div#main-content center {
height: 5000px;
}
<div id="banner">
<div id="banner-content">
<center>
<h1>
<big>
My name
</big>
</h1>
<small>
<p>sub heading here</p>
</small>
</center>
</div>
</div>
<div id="main-content">
<center>
<p>Main page content goes here</p>
</center>
</div>
Related
When item's (#box) height is bigger than screen, parent container's (#wrap) bottom padding gets cut off.
Normal view, #wrap's bottom and top padding applied:
html, body {
height: 100%;
}
#wrap {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
#box {
padding: 20px;
background: red;
margin: auto;
}
<div id="wrap">
<div id="box">
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
</div>
</div>
You can use this code
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
#box {
padding: 20px;
background: red;
margin: 20px auto;
}
<div id="wrap">
<div id="box">
CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br>
</div>
</div>
I am having a really difficult time trying to figure out why this is happening before I move further along in my development process of this page.
I have a very basic setup:
Fixed Footer
Fixed Header
A col-lg-3 nav bar
A col-lg-9 content box
The problem I am having is the div widths inside the nav col-lg-3 are not taking up the full width of the parent div. They appear to want to sit next to each other., even though I haven't declared a float -- and I have even tried clear:both between them. The div with ID of projects is supposed to be below the div with ID problem-div What am I doing wrong, or not understanding in order for this to happen?
NOTE The reason I am assuming this is a Bootstrap issue, is because if I remove the links to the CDN, the html / css functions as expected.
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
This is not bootstrap related. If you remove it you will get the same issue:
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
And this is due to the use of display:flex within #info-column. The default direction is row making both child divs next to each other. Switch to a column direction or simply remove display:flex
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
flex-direction:column;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
I've had a look around and cannot find anyone with a solution for this:
The issue: A client of mine is looking to have curved bottom sides to certain divs on their page. Some backgrounds will have a photo, some will have a subtle pattern (making the use of .PNG images difficult like I've done here: www.bootbro.com
So far I have this:
Link: http://jsfiddle.net/dg44thbr/1/
CSS:
body {
margin: 0;
}
.alignCenter {
text-align: center;
}
.padAll {
padding: 25px;
}
div#banner {
position: relative;
background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg);
width: 100%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
z-index: 555;
border-bottom:3px solid red;
}
div#content {
position: relative;
background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/05/ux-787980_1920-1750x750.jpg);
width: 100%;
margin-top: -175px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
z-index: 444;
border-bottom:3px solid red;
}
div#section {
position: relative;
background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/07/balloons-1750x500.jpg);
width: 100%;
margin-top: -175px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
z-index: 333;
border-bottom:3px solid red;
}
.left {
float: left;
}
.right {
float: right;
}
.clear::after {
clear: both;
content: "";
display: table;
}
.container {
max-width: 500px;
margin: auto;
}
.curveContent {
padding-top: 200px;
}
HTML:
<div id="banner" class="alignCenter padAll">Content here</div>
<div id="content" class="alignCenter padAll">
<div class="curveContent">
<p>Content here</p>
<p>But on another line! Oh no!</p>
<p>And another line?! What is this>!</p>
</div>
</div>
<div id="section">
<div class="container clear">
<div class="curveContent">
<div class="left col2">
<p>Content here</p>
<p>But on another line! Oh no!</p>
<p>And another line?! What is this>!</p>
</div>
<div class="right col2">
Right text
</div>
</div>
</div>
</div>
As you can see, the radius changes depending on the height of the div - something out of my control as this will be affected by containing content. Also the borders become thinner when they get to the sides.
Does anyone have any potential solutions for this?
Thank you
Border-radius can take a few static values such as border-radius: 0 0 200px 200px /15px;
body {
margin: 0;
}
.alignCenter {
text-align: center;
}
.padAll {
padding: 25px;
}
div#banner {
position: relative;
background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg);
width: 100%;
border-radius: 0 0 200px 200px /15px;
z-index: 555;
border-bottom:3px solid red;
}
div#content {
position: relative;
background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/05/ux-787980_1920-1750x750.jpg);
width: 100%;
margin-top: -175px;
border-radius: 0 0 200px 200px /15px;
z-index: 444;
border-bottom:3px solid red;
}
div#section {
position: relative;
background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/07/balloons-1750x500.jpg);
width: 100%;
margin-top: -175px;
border-radius: 0 0 200px 200px /15px;
z-index: 333;
border-bottom:3px solid red;
}
.left {
float: left;
}
.right {
float: right;
}
.clear::after {
clear: both;
content: "";
display: table;
}
.container {
max-width: 500px;
margin: auto;
}
.curveContent {
padding-top: 200px;
}
<div id="banner" class="alignCenter padAll">Content here</div>
<div id="content" class="alignCenter padAll">
<div class="curveContent">
<p>Content here</p>
<p>But on another line! Oh no!</p>
<p>And another line?! What is this>!</p>
</div>
</div>
<div id="section">
<div class="container clear">
<div class="curveContent">
<div class="left col2">
<p>Content here</p>
<p>But on another line! Oh no!</p>
<p>And another line?! What is this>!</p>
</div>
<div class="right col2">
Right text
</div>
</div>
</div>
</div>
http://jsfiddle.net/dg44thbr/3/
I have this html page structure used for different pages:
<div class="conteiner">
<div class="header">green</div>
<div class="fit_on_content">red<br />red</div>
<div class="fit_all">aqua</div>
<div class="footer">yellow</div>
</div>
with this css
.conteiner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: aquamarine;
}
.header {
position: relative;
top: 0;
height: 50px;
width: 100%;
background-color: green;
}
.fit_on_content {
position: relative;
display: table;
margin: 0 auto;
background-color: red;
}
.fit_all {
background-color: aqua;
????
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: yellow;
}
.header is positioned to the top.
.footer is positioned to the bottom.
.fit_on_content is positioned under header and has the height of the content that may change from page to page.
.fit_all is positioned under fit_on_content and must extend to the footer.
Any idea please?
Thanks
Here is a way using display: table
html,
body { height: 100%; margin: 0 }
.container {
display: table;
width: 100%;
height: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded {
height: 100%;
}
header {
background-color: #bbb;
height: 50px;
}
main {
background-color: #ddd;
}
main ~ main {
background-color: #fff;
}
footer {
background-color: #bbb;
height: 50px;
}
<div class="container">
<header class="page-row">
Header
</header>
<main class="page-row">
First content goes here
</main>
<main class="page-row page-row-expanded">
Second content goes here
</main>
<footer class="page-row">
Copyright, blah blah blah
</footer>
</div>
Updated as requested, using display: flex;
Note though, you need to add the prefixed properties for browsers that doesn't support flex unprefixed.
html,
body { height: 100%; margin: 0 }
.container {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
}
.page-row {
flex: 0 0 auto;
}
.page-row-expanded {
flex: 1 0 auto;
height: 0;
}
header {
background-color: #bbb;
height: 50px;
}
main {
background-color: #ddd;
}
main ~ main {
background-color: #fff;
}
footer {
background-color: #bbb;
height: 50px;
}
<div class="container">
<header class="page-row">
Header
</header>
<main class="page-row">
First content goes here
</main>
<main class="page-row page-row-expanded">
Second content goes here
</main>
<footer class="page-row">
Copyright, blah blah blah
</footer>
</div>