Hello I am just making a base template to help me make a website a lot better, I have just recently started using bootstrap and have noticed that when I resize my browser (for example to a mobile size) it is overlapping on my footer?
Does anyone know why this is happening?
Here are some images of when I add more text or resize:
Like I say I am fairly new to bootstrap and am most likely doing something really stupid which is easy to fix :)
Here is my css:
html, body { height:100% }
nav {
margin: 0;
padding: 0;
}
div {
display: block;
}
.col-centered {
float: none;
margin: 0 auto;
}
.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}
.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;
}
footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}
Here is my main HTML:
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>
EDIT: I forgot to include the footer, if you think that I need to add this for you then please let me know.
Thank you very much for even looking at this post!
EDIT 2:
Here is the code for my footer:
<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right">Back to top</p>
<p>© 2017 Company, Inc. · Privacy · Terms</p>
</div>
</div>
</footer>
Here is the link to the website:
http://81.131.193.35/
Remove the height of .content
.content {
padding: 5rem 1.5rem;
text-align: left;
width: 75%;
margin: 0 auto;
background: green;
}
and also remove the height of .container
.container {
width: 100%;
margin: 0;
padding: 0;
background: red;
}
I would wrap the footer.php in a pair of divs and apply a row and col-md-auto class to it. It looks like the footer is maybe styled with an absolute or even a static display. This is making the footer not play along with the other divs
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<?php include "footer.php" ?>
</div>
</div>
</div>
Related
I have a specific layout that is causing me HUGE headaches. Here is an image:
My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.
Current Markup
<body>
<div id="container" class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<div class="panel-logo">
"Logo here text"
</div>
</div>
</div>
</div>
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<nav class="panel">
</nav>
</div>
</div>
</div>
</div>
<div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
<div class="inner-panel">
<header class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 header-logo">
LOGO Would go here, of course.
</div>
<div class="pure-u-md-3-4 pure-u-1 header-title">
<h1>Consumers Energy</h1>
<h1><strong>CARE 3.0 Program</strong></h1>
<h1>Enrollment Application</h1>
</div>
</header>
<div id="content">
"Enrollment application text..."
</div>
</div>
</div>
</div>
</body>
Current CSS
.panel {
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.panel.p {
padding: 3px;
}
.panel .panel-row {
display: table-row;
}
.panel .inner-panel {
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: red;
}
Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...
Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.
NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!
I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.
Also read on calc() here
HTML:
<main>
<aside>
<div class="logo">Logo</div>
<div class="aside-content">Other Content</div>
</aside>
<section>Section</section>
</main>
CSS:
html, body{ height: 100%; }
main{
height: 100%; background: teal; padding: 2em; box-sizing: border-box;
display: flex; flex-direction: row;
}
aside{
height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
background: #fff; height: 140px;
}
aside .aside-content{
background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}
main section{
height: inherit; background: #fff; flex-grow: 2;
}
Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/
Edit:
Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/
Why wont my divs float? Content1 and Content2 should sit side by side. What am I missing? I am sure that it is something simple. i am obviously very early on in this project, so no need to correct all the other crap :).
Here is my css:
body {
margin: 0;
background-color: #cccccc;
}
#header {
width: 100%;
height:90px;
background-color: #999999;
}
#container {
margin-right: 20%;
margin-left: 20%;
width: 1000px;
}
#content1 {
width: 300px;
float: left;
}
#content2 {
width: 405px;
float: left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:90px;
background-color: #999999;
}
Here is my html:
<div id="header">
My Personal Page
</div>
<div id="container">
<div id="Content1">
<img src="http://localhost:8888/portrait.png" height="400">
</div>
<div id="Content2">
<img src="http://localhost:8888/portrait.png" height="400">
</div>
</div>
<div id="footer">
Copyright Information
</div>
Because you wrote your id's wrong. The name of the ID must be excactly the same as the name in your css sheet. In html you have Content1 with an uppercase C while in your css you have content1 with a lowercase c. This same scenario you have with Content2(html) and content2(css).
Your html: (Wrong)
<div id="Content1"> && <div id="Content2">
New html: (Right)
<div id="content1"> && <div id="content2">
DEMO
I managed to overflow a parent div which is a content wrapper with the following CSS, however now this div hides content behind it. How can I do this right?
jsfiddle: http://jsfiddle.net/YMSvU/
My HTML File
<div class="contentwrapper">
<div class="promotional_outer">
<div class="promotional">
...
</div>
</div>
<div class="footer">
... this footer is overflown by the promotional div ...
</div>
</div>
My CSS File
.contentwrapper {
width: 1150px;
text-align: left;
margin: 0px auto;
}
.promotional_outer{
background-color: #8fcbe5;
position:absolute;
left: 0;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
.promotional {
background-color: #30a3da;
padding: 75px;
color: #fff;
width: 1000px;
margin: 0px auto;
clear: both;
}
I had exactly the same problem on a site I'm working on at the moment.
Turns out the only solution is to do it like this:
<div class="wrapper">
<div class="header">
...
</div>
</div>
<div class="promotion_outer">
<div class="wrapper">
<div class="promotion_inner">
...
</div>
</div>
</div>
I think it would be best to adjust your html to do something like this:
<div class="inner">
<p>Content</p>
</div>
<div class="promo">
<div class="promo--inner">
<p>Content</p>
</div>
<div class="promo--callout">
<p>Promo callout</p>
</div>
</div>
<div class="inner footer">
<p>Footer content</p>
</div>
Check out this fiddle: http://jsfiddle.net/kFShb/2/
You can bypass the element's flow by using z-index.
.footer {
position: relative;
z-index: 10;
}
Fiddle
Remove position: absolute from .promotional_outer.
Absolute positioning removes an element from the normal document flow.
Just delete position: absolute; and left: 0; in your CSS
.promotional_outer{
background-color: #8fcbe5;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
This should solve your problem.
I'm redesigning a site and the different sections (header, banner image, main, etc.) have a background that stretches all the way across, however the content is contained to a certain width and that box is centered.
However, in the design the "banner image" (which is a image below the header but above the main content) will extend beyond the width of the rest of the content. At first this was easy until a need arose to have text on top of the banner image, and that text would need to line up with the rest of the text.
I cannot use CSS background image because on some pages the banner image area will be a slider, which requires tags.
I have a working solution, but it seems clunky and I was hoping to find a better method: http://jsfiddle.net/PkStg/10/
HTML:
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
<div class="banner-image-wrapper">
<img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
CSS:
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner-text-outer {
position: relative;
}
.banner-text-inner {
position: absolute;
top: 10px;
}
.banner-image-wrapper {
margin: 0 auto;
max-width: 400px;
min-width: 300px;
font-size: 0;
}
.banner-image-wrapper img {
width: 100%;
}
I know that you wanted to not use background-image, but here is a solution which uses that for anyone else who sees the page.
Perhaps your slider could make use of the background-image?
This should do it:
jsFiddle
HTML
<body>
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
</body>
CSS
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner {
background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
}
I would like to know what the best way is to format the following layout:
(with eveything aligned and spaced neatly):
Here is the HTML:
<div class"wrapper">
<img alt="Image 1" src="images/image1.png" />
<div class="description">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
I tried the following but the vertical-align property does not seem to be working as I cannot align the top of the h1 with the top of the image:
img, div.description {
float: left;
}
div.description { margin-left: 10px; vertical-align: top; }
h1 { background: blue; }
p { background: red; }
What if instead of how the right hand side part is displayed below,
we wanted the right hand side to also be vertically centered instead
of being top aligned?
Here is the JSFiddle link:
http://jsfiddle.net/johngoche99/ZPKZj/1/
OK, to keep the text from dropping down below when the browser is resized it is necessary to specify the width of the wrapper element to something like 700px. Then it works.
Thanks.
in css you need to do this
img{
float: left;
height: 300px
}
div{
float: left;
}
h1{
padding: 10px;
background-color: #584480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
p{
padding: 10px;
background-color: #E24480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
nothing more ...
Hope this will help you ...
This can be accomplished with simple CSS.
img, div{
float: left;
margin: 10px;
}
http://jsfiddle.net/ZPKZj/2/
IRL, do NOT use this CSS. It is far too generic to be useful in any production environment. You might give your elements IDs or classes to allow the rules to be much more specific.
It looks you markup need a little change to be more, khm right;
HTML:
<div id="all">
<div id="sidebar">
<img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div id="main">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
CSS:
#sidebar { float: left; }
#sidebar { margin-right: 40px; }
h1 {
margin-bottom: 30px;
margin-top: 0;
}
link to look how it will be:
http://jsfiddle.net/56Z7C/1/
I think you want something like this:
JSFIDDLE
You want to use css here. You will add an ID to the first div like <div id="wrapper"> this is your main div. Then in the second div you add <div id="headings"> for the headings. then in your css add the beneath code. (note: this isn't the best css code ever. but it works :))
html:
<div id="wrapper">
<img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
<div id="headings">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
css:
#wrapper{
width: 960px;
margin: 0 auto;
}
#wrapper img{
float: left;\
margin-right: 40px;
padding-right: 40px;
}
#headings{
position: relative;
float: left;
}
h1{
margin-top: -5px;
}
Hope it helps!
Vertical-align only works on tables. If you want to do that with divs, you could try using display: table:
<div class="table">
<div class="row">
<div class="cell">
<img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div class="cell" id="stuff">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</div>
</div>
</div>
And the CSS:
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
#stuff { vertical-align: middle; }
This has the advantage of not being dependent on sizes/margins of elements, but is unsupported in IE7 and below. As all things in life, display: table is a tradeoff.