I am having a problem getting my footer to stay at the bottom I have made it position: fixed; but it will still come up if the content changes. Also, i can't get the background-color to change. Is there something wrong with my code that I am just not seeing?
HTML:
<div id="footer">
<div class="container">
<span class="left text-muted">content </span>
<span class="right">
Content
</span>
</div>
</div>
CSS:
.footer {
height: 60px;
background-color: #939598;
position: fixed;
}
.left {
float:left;
align: left;
}
.right {
float:right;
}
You are using the wrong selector.
Its supposed to be the id based selector #footer and not the class based .footer.
#footer {
height: 60px;
width: 100%;
background: #939598;
position: fixed;
bottom: 0px
}
.left {
float: left;
}
.right {
float: right;
}
<div id="footer">
<div class="container">
<span class="left text-muted">content </span>
<span class="right">
footer Content
</span>
</div>
</div>
Related
I have a layout like below -
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
}
.navbar-fixed-top {
top: 0;
}
.page-sidebar {
float: left;
width: 180px;
top: 0;
overflow: auto;
}
.page-content {
min-height: 970px;
float: left;
}
footer {
width: 100%;
text-align: center;
position: relative;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top">
Navbar Top
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">
Navbar Side
</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content">
Content
</div>
</div>
<div>
<footer id="footer">
Foter
</footer>
</div>
</div>
My main content-wrapper is coming below the sidebar and footer somewhere in the middle. I have tried using
display:inline-flex
on content-wrapper which places page-content next to sidebar but footer still remains in middle of page. Please help me with this.
You can set page-content width using calc. check updated snippet below
body {
margin: 0px;
}
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
width: 100%;
padding-top: 50px;
display: block;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
background: red;
}
.navbar-fixed-top {
top: 0;
}
.content-wrapper {
background: grey;
float: left;
width: 100%;
}
.page-sidebar {
float: left;
width: 180px;
overflow: auto;
}
.page-content {
min-height: 970px;
float:left;
background: green;
width: calc(100% - 180px);
}
footer {
width: 100%;
text-align: center;
position:relative;
background: black;
clear: both;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top"> header<br/>
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">sidebar</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content"> content
</div>
</div>
<div class="clearfix"></div>
<div>
<footer id="footer">footer
</footer>
</div>
</div>
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
Simple yet can't figure it out. Hot can I make 2 sidebar boxes one at the top and one bellow. Here is demo
http://jsfiddle.net/logintomyk/fQPse/
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
Those two sidebar divs.
Wrap the sidebars with a parent element which you add the float:right CSS too
#wrapper {
width: 90%;
}
#header {
width: 100%;
height: 50px;
background-color: lightblue;
}
#content {
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top: 4px;
background-color: yellow;
}
#content >p {
margin-right: 100px;
margin-top: 0px;
}
.sidebarGroup {
width: 100px;
float: right;
}
.sidebar {
width: 100px;
margin-top: 4px;
background-color: pink;
}
#footer {
width: 100%;
height: 40px;
margin-top: 4px;
background-color: red;
}
<div id="Wrapper">
<div id="header">
header
</div>
<div class="sidebarGroup">
<div class="sidebar">
Text
<br/>Sidebar
</div>
<div class="sidebar">
Text
<br/>Sidebar
</div>
</div>
<div id="content">
<p>
Stuff
<br/>text
<br/>Just to fill some space
</p>
</div>
<div id="footer">
footer
</div>
</div>
This is practically what frameworks like Bootstrap were made for, but:
<div id="page">
<div id="header">
header
</div>
<div id="content-wrapper">
<div id="sidebar">
<div class="sidebar-box">
I am sidebar content
</div>
<div class="sidebar-box">
I am also sidebar content
</div>
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div class="clearfix">
</div>
</div>
<div id="footer">
footer
</div>
</div>
and then:
#header {
background: red;
}
#content {
background: blue;
width: calc(100% - 104px);
}
#sidebar {
width: 100px;
float: right;
}
.sidebar-box {
background: green;
}
#footer {
background: yellow;
margin-top: 4px;
}
#content-wrapper {
margin-top: 4px;
}
#content:after {
content:'';
display:table;
clear:both;
}
does the trick!
Fiddle here: http://jsfiddle.net/7pcLks4m/
I want to get structure like this:
---------------------------------------------
| head |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed || | |
| || content-left | con-right|
| ||--------------------------------|
css file:
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
}
.content-div {
position:absolute;
float:right;
left:150px;
}
.content-right {
width: 310px;
float: right;
}
.content-left {
float: left;
}
divs:
<div>
<div class="left-menu" > </div>
<div class="content-div">
<div class="content-left"> </div>
<div class="content-right"> </div>
</div>
</div>
I get content-right in the next line, not in the same line with content-left, like i have content-left width=105%, but i don't. I tried this and some other suggestion, but no luck. How can i fix this problem?
Flexbox can do that.
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100vh;
}
.left-menu {
position: fixed;
/* fix menu, no scroll */
left: 0;
width: 150px;
background: red;
height: 100%;
}
.content-div {
margin-left: 150px;
background: blue;
flex: 1;
display: flex;
}
.content-right {
flex: 0 0 310px;
}
.content-left {
flex: 1;
background: orange;
}
<div class="parent">
<div class="left-menu"></div>
<div class="content-div">
<div class="content-left"></div>
<div class="content-right"></div>
</div>
</div>
Check out the JsFiddle for the demo
HTML
<div>
<div class="header">HEADER</div>
<div class="left-menu" >LEFT MENU</div>
<div class="content-div">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
</div>
CSS
.header {
height: 70px;
background: blue;
}
.left-menu {
width: 120px;
background: red;
position: fixed;
left: 0px;
top: 70px;
bottom: 0px;
}
.content-div {background: yellow;margin-left: 120px}
.content-div div {
display: inline-block;
width: 49%;
}
.content-left {background: aqua;}
.content-right {background: green;}
Position anything is a pain, I suggest using bootstrap for something like this.
(I just saw the comment above me about suggesting the same thing but I'll give you the code so you can implement it just incase)
Bootstrap supplies a nice CDN that you can throw in your html and have bootstrap wherever you go!
So put all of this in your html...
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Header</h1>
</div> <!-- col-lg-12" -->
</div> <!-- row -->
<div class="row">
<div class="col-lg-3" style="position: fixed;">
<p>Left Menu Fixed</p>
</div> <!-- col-lg-3 -->
<div class="col-lg-6">
<p>Content Left</p>
</div> <!-- col-lg-6 -->
<div class="col-lg-3">
<p>Content Right</p>
</div> <!-- col-lg-3 -->
</div> <!-- row -->
</div> <!-- container -->
</body>
</html>
This will provide the layout you're suggesting.
Hope this helps!
This should work for what you want
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
width: 150px;
height: 100%;
}
.content-div {
position:fixed;
left:150px;
right: 0px;
height: 100%;
}
.content-right {
float: right;
}
.content-left {
float: left;
}
Set a height and background-color on .content-left and .content-right if you want to see how they position themselves.
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
background: black;
width:15%;
height: 100%;
}
.content-div {
position:absolute;
float:right;
left:16%;
background: red;
width:84%;
height: 100%;
}
.content-right {
width: 310px;
height: 100%;
float: right;
background: yellow;
}
.content-left {
float: left;
background: green;
height: 100%;
width: calc(100% - 310px);
}
There is a 'container' with overflow: auto that contains groups of floated elements, 'value'. Inside 'value', there is an absolute positioned element, 'popup' which gets cut off by the overflow. How can I make 'popup' show up and still keep 'container' from losing its layout?
HTML
<div class="container">
<div class="group">
<span class="label">Label</span>
<span class="value">
<span class="popup_container">
<div class="popup">Popup</div>
</span>
</span>
</div>
<div class="group">
<span class="label">Label</span>
<span class="value">
<span class="popup_container">
<div class="popup">Popup</div>
</span>
</span>
</div>
</div>
CSS
.container {
overflow: auto;
background-color: red;
}
.label {
float: left;
clear: left;
width: 100px;
}
.value {
float: left;
}
.popup_container {
position: relative;
}
.popup {
position: absolute;
height: 200px;
width: 200px;
background-color: orange;
}
Please see http://jsfiddle.net/KA7AB/2/
Thanks
Set your popup_container to absolute:
position: absolute;
http://jsfiddle.net/KA7AB/6/