I'm trying to create a copy of a website I thought was interesting. However I'm running into some problems trying to highlight the whole row at once, without highlighting others. I've created a table of divs however when I try to select a single row such as with class .row:hover im unable to select anything(hovering mouse should change color). I've tried multiple combination and google searches such as .row:hover column names, however this selects every row not just the one I want. I cant seem to figure out this behavior would appreciate any help.
https://jsfiddle.net/u31h4n5y/
body {
width: 100vw;
margin: 0px;
padding: 0px;
background-color: blue;
overflow: hidden;
}
h1,
h2 {
font-family: sans-serif;
color: white;
text-align: center;
}
#container {
width: 63vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
}
.row {
height: 125px;
background-color: red;
margin: 0px;
padding: 0px;
}
.one {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
margin: 0px;
}
.two {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
margin: 0px;
}
.three {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
}
.four {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
}
.row:hover {
background-color: red;
}
<h1>WEB
<h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="one">
<p>Week 1</br> May 7 <br> - <br> May 11 </p>
</div>
<div class="two">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="three">
Welcome
Lecture 1
</div>
<div class="four">
<h3> Work Due </h3>
</div>
<div class="row">
<div class="one">
<p> Week 2</p>
</div>
<div class="two">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="three">
Lecture 2
</div>
<div class="four"></div>
</div>
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
<div class="special"></div>
This will definitely work
body {
width: 100vw;
margin: 0px;
padding: 0px;
background-color: blue;
overflow: hidden;
}
h1,
h2 {
font-family: sans-serif;
color: white;
text-align: center;
}
#container {
width: 63vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
}
.row {
height: 125px;
background-color: red;
margin: 0px;
padding: 0px;
}
.one {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
margin: 0px;
}
.two {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
margin: 0px;
}
.three {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
}
.four {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
}
.row:hover div {
background-color: red;
}
<!DOCTYPE html>
<html>
<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="one">
<p>Week 1<br> May 7 <br> - <br> May 11
<p/>
</div>
<div class="two">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="three">
Welcome
Lecture 1
</div>
<div class="four">
<h3> Work Due </h3>
</div>
</div>
<div class="row">
<div class="one">
<p> Week 2</p>
</div>
<div class="two">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="three">
Lecture 2
</div>
<div class="four"></div>
</div>
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
<div class="special"></div>
</html>
In you css part, just change a little bit of your .row:hover to
.row:hover div {
background-color:red;
}
.row:hover as when you hover it, you want to manipulate div tag, so add div tag in .row:hover and do the css part for div tag.
you can also add any another tag/class/ID and then manipulate them in the .row:hover
Simply because the background is not defined on the .row element but its child element, so you need to target the child. You may simply do this;
.row:hover > div{
background-color:red;
}
Full code:
body {
margin: 0px;
padding: 0px;
background-color: blue;
}
h1,
h2 {
font-family: sans-serif;
color: white;
text-align: center;
}
#container {
width: 63vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
}
.row {
height: 125px;
background-color: red;
margin: 0px;
padding: 0px;
}
.one {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
margin: 0px;
}
.two {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
margin: 0px;
}
.three {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
}
.four {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
}
.row:hover>div {
background-color: red;
}
<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="one">
<p>Week 1<br> May 7 <br> - <br> May 11
<p/>
</div>
<div class="two">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="three">
Welcome
Lecture 1
</div>
<div class="four">
<h3> Work Due </h3>
</div>
</div>
<div class="row">
<div class="one">
<p> Week 2</p>
</div>
<div class="two">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="three">
Lecture 2
</div>
<div class="four"></div>
</div>
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
<div class="special"></div>
Related
This question already has answers here:
Text floating in block next to image
(6 answers)
Closed 2 years ago.
I am new to html + css and I can't seem to figure out how you place items horizontally despite reading a couple articles. What I am going for is having two lines of text on the right side of my image. Currently I have everything placed vertically.
Html:
#content {
max-width: 640px;
margin: 0 auto;
padding: 64px 24px;
}
.section {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.img {
width: 200px;
height: 200px;
border-radius: 40px;
margin-bottom: 12px;
}
```
<body>
<div id="content">
<div class="section">
<img src="Images/Logo.png" class="img">
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
<div class="section">
<h6>Projects</h6>
<ul>
<li>
<h3>Placeholder</h3>
<p> Placeholder </p>
</li>
<li>
<h3>Placeholder </h3>
<p> Placeholder </p>
</li>
</ul>
</div>
</div>
</body>
I am not sure if I am sharing everything I need too, Here's the GitHub repo with all the code if you need it.
You can use display: flex; property.
/* ↓ new styling ↓ */
.section-horizontal {
display: flex;
}
.description {
margin-left: 32px;
}
/* your styling */
#content {
max-width: 640px;
margin: 0 auto;
padding: 64px 24px;
}
.section {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.img {
width: 200px;
height: 200px;
border-radius: 40px;
margin-bottom: 12px;
}
<div id="content">
<div class="section section-horizontal"> <!-- class for flexbox -->
<img src="Images/Logo.png" class="img">
<div class="description"> <!-- add this block to align headings vertically -->
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
</div>
<div class="section">
<h6>Projects</h6>
<ul>
<li>
<h3>Placeholder</h3>
<p> Placeholder </p>
</li>
<li>
<h3>Placeholder </h3>
<p> Placeholder </p>
</li>
</ul>
</div>
</div>
try to get in touch with the flex property. It will make things alot more simple :)
html:
<body>
<div id="content">
<div class="section">
<img src="Images/Logo.png" class="img">
<div class="flex">
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
</div>
</div>
</body>
css:
.flex {
display: flex;
}
You can do with flexbox like this
#content {
max-width: 640px;
margin: auto;
padding: 64px 24px;
display:flex;
flex-wrap:wrap;
justify-content: space-evenly;
}
.section {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.img {
width: 200px;
height: 200px;
border-radius: 40px;
margin-bottom: 12px;
}
<body>
<div id="content">
<div class="section">
<img src="Images/Logo.png" class="img">
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
<div class="section">
<h6>Projects</h6>
<ul>
<li>
<h3>Placeholder</h3>
<p> Placeholder </p>
</li>
<li>
<h3>Placeholder </h3>
<p> Placeholder </p>
</li>
</ul>
</div>
</div>
</body>
I need to create equal height cards using flexbox or any other methods in css. But one of those cards will have a ribbon on top of the card. That will be set dynamically in react.
So I need to create equal height cards except one. Something like below,
An example is here,
https://codepen.io/andichamy-ga/pen/MGJPXv
HTML:
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar<br>
foo
</div>
</div>
<div class="some">
<div class="recommended">Recommended Card</div>
<div class="box">
foo<br>
</div>
</div>
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar
</div>
</div>
</div>
CSS:
.container {
display: flex;
}
.some {
padding: 20px;
margin-right: 20px;
}
.recommended {
background-color: yellow;
width: 200px;
height: 20px;
padding: 5px 10px;
}
.one {
background-color: transparent;
}
.box {
width: 200px;
height: 150px;
background-color: green;
padding: 10px;
}
I tried in many different ways. But none of those seems like a proper way. How can I do this elegantly?
You can make the top ribbon to be absolute position and rely on flexbox for the remaining to have equal height:
* {
box-sizing:border-box;
}
body {
background-color: #a3d5d3;
}
.container {
display: flex;
}
.some {
margin-top:50px;
margin-right: 30px;
position:relative;
}
.recommended {
position:absolute;
background-color: yellow;
left:0px;
right:0px;
height: 40px;
top:-40px;
padding: 5px 10px;
}
.one {
background-color: transparent;
}
.box {
width: 200px;
height:100%;
background-color: green;
padding: 10px;
}
<div class="container">
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br> bar
<br> foo bar
<br> foo bar
<br>
</div>
</div>
<div class="some">
<div class="recommended">Recommended Card</div>
<div class="box">
foo<br>
</div>
</div>
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br> bar
</div>
</div>
</div>
You want something like a price table, more in number like below.
https://jsfiddle.net/rdggv429/
<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>
<div class="columns">
<ul class="price">
<li class="header">Basic</li>
<li class="grey">$ 9.99 / year</li>
<li>10GB Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>1GB Bandwidth</li>
<li class="grey">Sign Up</li>
</ul>
</div>
<div class="columns special">
<ul class="price">
<li class="special-li">Special</li>
<li class="header" style="background-color:#4CAF50">Pro</li>
<li class="grey">$ 24.99 / year</li>
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
<li class="grey">Sign Up</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Premium</li>
<li class="grey">$ 49.99 / year</li>
<li>50GB Storage</li>
<li>50 Emails</li>
<li>50 Domains</li>
<li>5GB Bandwidth</li>
<li class="grey">Sign Up</li>
</ul>
</div>
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
margin-top: 50px;
position: relative;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
.special-li {
position: absolute;
top: -60px;
border: 1px solid #ccc;
width: 100%;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
If you want the header dynamically, give it on the page load, append the LI to the first element on the UL
HTML
<div class="some-all">
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar<br>
foo
</div>
</div>
<div class="some">
<div class="recommended">Recommended Card</div>
<div class="box">
foo<br>
</div>
</div>
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar
</div>
</div>
use css
<style>
.some-all{display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.some-all .some{
background-color: green;
}
</style>
I don't think that can be possible with flexbox, but this could be a possible solution for your question, hope it might help you.
You can also view it on Codepen: https://codepen.io/techyogi/pen/ervNWW
CSS
$blue: #a3d5d3;
body {
background-color: $blue;
}
.container {
display: flex;
padding-top: 20px;
}
.some {
padding: 20px;
margin-right: 20px;
position:relative;
}
.recommended {
position: absolute;
background-color: yellow;
width: 200px;
height: 20px;
padding: 5px 10px;
margin-top: -30px;
}
.one {
background-color: transparent;
}
.box {
width: 200px;
height: 100%;
background-color: green;
padding: 10px;
}
HTML
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar<br>
foo
</div>
</div>
<div class="some">
<div class="recommended">Recommended Card</div>
<div class="box">
foo<br>
</div>
</div>
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar
</div>
</div>
</div>
Hi Im trying to get the layout like in the image but Im not able to get the expected layout.Right now its like, If I get two boxes correct, another one goes wrong or get misplaced over another <div>,so how do it get it correct. I know it easy but not able to get the css correctly.
#first {
border: 1px solid black;
box-sizing: border-box;
width: 300px;
float:left;
height:300px;
margin:20px
}
#second {
width: 100px;
float:left;
height:100px;
margin:20px
}
#third {
width: 600px;
float: left;
height: 100px;
border: 10px;
}
<div>
<div>
<div id="first">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Lime</li>
</ul>
</div>
<label> DESCRIPTION</label>
<div id="second">
<br />
<textarea rows="4" cols="50"> Description</textarea>
<br />
<button onClick={this.buttonClick.bind(this)} > submit</button>
</div>
</div>
<br />
<div>
<ul>
<li>Daisy</li>
<li>Jasmine</li>
<li>Rose</li>
</ul>
</div>
</div>
This should get you started using flex boxes.
I will leave padding and margins for you figure out.
Check out https://www.w3schools.com/css/css3_flexbox.asp to learn how to use flex boxes.
.border {
border: 1px solid black;
}
.div1 {
width: 200px;
display: inline-block;
}
.div2 {
flex: 1 0;
}
button {
float: right;
width: 100px;
}
.outer {
height: 400px;
display: flex;
}
.inner {
width: 400px;
display: flex;
flex-direction: column;
}
<div class="outer">
<div class="div1 border"></div>
<div class="inner">
<div class="div2 border"></div>
<div>
<button>Click</button>
</div>
<div class="div2 border"></div>
</div>
</div>
HTML
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="div1">
</div>
<div class="div2">
<button>
hello
</button>
</div>
<div class="div3"></div>
</div>
</div>
CSS
.container {
width: 100%;
height: 100%;
}
.right{
width: 60%;
margin: 15px;
height: 500px;
background-color: lightgray;
float:left;
}
.left{
width: 30%;
margin: 15px;
height: 500px;
background-color: lightyellow;
float:left;
}
.div1{
height: 40%;
width: auto;
border: 1px solid black;
margin: 5px;
}
.div2{
height: 10%;
border: 1px solid black;
width: auto;
margin: 5px;
}
.div3{
height: 40%;
width: auto;
border: 1px solid black;
margin: 5px;
}
Hope that helps! :)
First of all, You dont have #third div id.
Second you could put all the divs into a Main div and work from there.
#Main{..}
#first {
border: 1px solid black;
box-sizing: border-box;
width: 300px;
float:left;
height:300px;
margin:20px
}
#second {
width: 100px;
float:left;
height:100px;
margin:20px
}
#third {
width: 600px;
float: left;
height: 100px;
border: 10px;
}
<div id="Main">
<div id="first">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Lime</li>
</ul>
</div>
<label> DESCRIPTION</label>
<div id="second">
<br />
<textarea rows="4" cols="50"> Description</textarea>
<br />
<button onClick={this.buttonClick.bind(this)} > submit</button>
</div>
</div>
<br />
<div id="Third">
<ul>
<li>Daisy</li>
<li>Jasmine</li>
<li>Rose</li>
</ul>
</div>
</div>
take a look:
https://jsfiddle.net/r8r5Ldq3/
<div>
<div id="first">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Lime</li>
</ul>
</div>
<div id="test">
<label> DESCRIPTION</label>
<div id="second">
<br />
<textarea rows="4" cols="50"> Description</textarea>
<br />
<button onClick={this.buttonClick.bind(this)}> submit</button>
</div>
<div id="third">
<ul>
<li>Daisy</li>
<li>Jasmine</li>
<li>Rose</li>
</ul>
</div>
</div>
</div>
#first {
border: 1px solid black;
box-sizing: border-box;
width: 300px;
float: left;
height: 300px;
margin: 20px
}
#second {
width: 100px;
}
#third {
border: 10px;
}
#test {
float: left;
}
I am html/css beginner and Created this webpage in which there is three main divs header,boxcontainer,footer.
there is some problem with footer div that its background is not showing before its text. i have used float in box container divs.
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white;
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
div#footer {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Clear the float for the footer using clear:both
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
div#footer {
clear: both;
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events
<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Always set layout of parent element while using float on child
elements.
You haven't set layout of parent element in your code.
There are many ways of setting layout. You can use overflow: hidden i.e:
#boxcontainer {
overflow: hidden;
}
Alternatively you can use :after pseudo element as well:
#boxcontainer:after {
display: block;
content: '';
clear: both;
}
div#header {margin-left:1%;background-color:lightblue;height:30px;width:95%;}
ul#menu li {margin:10px;color:black;font-size:25px;display:inline;margin-top:100px;}
ul#menu li:hover{color:white}
div.box { background-color:lightblue;height:200px;width:200px;float:left;margin:10px;width:35%;}
div.boxhead {background-color:yellow;height:30px;padding:0px;width:100%;}
div.boxhead p {font-size:150%;text-align:center;color:lightblue;height:30px;width:200px;padding:0px;-webkit-margin-before: 0.0em;-webkit-margin-after:0.0em;}
div#footer {margin-left:1%;background-color:lightblue;width:95%;}
#boxcontainer {overflow: hidden;}
<div style="margin: auto;width: 95%;"id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
Instead of using a <div>, try using the tag <footer>.
html
<footer class="footer">
<p>Your content</p>
</footer>
css
.footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
Here are two solutions for your case:
Remove the float of the footer div
#footer {
float:none;
}
or
2.Add helper class clearfix to your footer div:
<div id="footer" class="clearfix">
with the following style, which will clear the float
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
hi you can add this code for footer : clear:both
div#footer {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
clear: both;
}
and for more reference see this link : https://jsfiddle.net/
thanks
Add .clearfix class to the parent of float elements:
<div id="boxcontainer" class="clearfix">...</div>
CSS for .clearfix:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Also, I think that you need not fixed height at your footer. So, remove height: 30px; from your footer div.
<!doctype html>
<html>
<head>
<style>
div#header {
margin-left: 1%;
background-color: lightblue;
height: 30px;
width: 95%;
}
ul#menu li {
margin: 10px;
color: black;
font-size: 25px;
display: inline;
margin-top: 100px;
}
ul#menu li:hover {
color: white;
}
div.box {
background-color: lightblue;
height: 200px;
width: 200px;
float: left;
margin: 10px;
width: 30.3%;
}
div.boxhead {
background-color: yellow;
height: 30px;
padding: 0px;
width: 100%;
}
div.boxhead p {
font-size: 150%;
text-align: center;
color: lightblue;
height: 30px;
width: 200px;
padding: 0px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
div#footer {
margin-left: 1%;
background-color: lightblue;
width: 95%;
}
</style>
</head>
<body>
<div style="margin: auto;width: 95%;" id="container">
<div></div>
<div id="header">
<ul id="menu">
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contect us</li>
</ul>
</div>
<div id="boxcontainer" class="clearfix">
<div class="box">
<div class="boxhead">
<p>Events<p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Become a Sponser</p>
</div>
</div>
<div class="box">
<div class="boxhead">
<p>Gallery</p>
</div>
</div>
</div>
<div id="footer">
<p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: #gmail.com</p>
</div>
</div>
</body>
</html>
Just remove height: 30px from footer and add float: left;
div#footer {
margin-left: 1%;
background-color: lightblue;
width: 95%;
float: left;
}
First You need to set the style for footer
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Then You call
<div id="footer">footer</div>
I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>