After quite a bit of googling and searching around on here I haven't been able to find a solution to my problem. I am not able to display the trashcan icons the way I need them to be displayed. The paragraphs in the html body are inserted dynamically and can have varying heights so I want to display and align the trash can icons to the top of each of the adjacent paragraphs. How can I do this using css/html? See below for current behavior.
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>
If you need to save the current html structure, then you can solve this problem using the css properties display: grid and display: contents. It's not the best solution, but it works. Example below:
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
/*
!!! below are the new CSS changes !!!
*/
div#output-container {
display: grid;
grid-auto-flow: column;
}
div.text {
display: contents;
}
div.text:nth-child(1) > * {
grid-column: 1;
}
div.text:nth-child(2) > * {
grid-column: 2;
}
div.text:nth-child(3) > * {
grid-column: 3;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>
Nevertheless, I still recommend reviewing your html structure, for tabular (display: table) or grid-based (display: grid),
You may have a strong reason for the HTML structure you are employing. However, I think that it is difficult to achieve the desired result using that structure. A simple solution would be to adjust your structure and make it easy to align items.
.container{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.header{
display: flex;
gap: 10px;
}
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
</body>
</html>
Related
I want the style of this page of mine to be justified in the center but it doesn't work.
Especially for the converter tab I want each element to have its own line and must be centered inside the div container.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: block;
align-items: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I tried the display block and in-line block but the element inside the container is not moving.
i think the container class is the implemented one because he is the in the general div that contain the "converter-tab" div , and the reason of not-centered elements is the padding and margin css classes.
try to remove it or replace it by this one :
.container {
margin: auto;
}
What you really have to do in this case is to assign a property text-align: center
to your .converter-tab class and moreover you have to wrap your h2, input and button individually inside a separate div for each one.
You can check my working snippet below:
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: block;
align-items: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
text-align: center;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<div><h2>Metric/Imperial Unit Conversion</h2></div>
<div><input type="text" id="input-el" class="converter-input" /></div>
<div><button class="converter-btn" id="convert-btn">Convert</button></div>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I've annotated your css below. I've made your input div children block level elements so they appear on their own line. I've then added margin: auto to them to make them centered. I've aligned text to the center using text-align: center;
Alignment is always a PITA (much less so these days) but there's a handy tool to use to help you: howtocenterincss.com
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-tab > * {
display: block; /* make each item a block element so it appears on its own line */
text-align: center; /* make text (e.g. inside <p> tags) centered */
margin-inline: auto; /* make block level elements centered */
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
margin-bottom: 0.5rem; /*just added this to neaten it up a smidge */
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
text-align: center; /* center the text in your output div */
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
As it's acceptably supported all over major browsers I'd use flex: just change the display mode of your container div to flex, set flex-direction: column; and justify-content: center;. After this adjust top and bottom padding as you prefer.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I am not able to move my p tag. I tried padding but its not working.
Here is the code. You can find the p tag inside the div of the P1 class.
* {
box-sizing: border-box;
}
body {
background-color: #FFB7C5;
margin: 0;
}
.top-heading {
height: 70px;
font-family: 'Bebas Neue', cursive;
padding: auto;
margin: auto;
width: 30%;
font-size: 2rem
}
.top-heading h1 {
text-align: center;
}
.container {
border: 1px solid black;
margin-top: 10%;
height: 28rem;
}
.P1 {
border: 1px solid green;
margin-left: 10%;
height: 80%;
width: 30%;
}
.P1 p {
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 2rem;
padding-right: 100px;
}
.P2 {
border: 1px solid green;
margin-top: -27.3%;
margin-left: 60%;
height: 80%;
width: 30%;
}
.dice {
/* border:1px solid red; */
border-radius: 20px;
height: 65%;
width: 65%;
margin: 50px auto;
background-color: #09585d;
}
.circle {
display: inline-block;
border-radius: 50%;
background-color: honeydew;
height: 20%;
width: 20%;
margin: 30px 50px;
}
.c2 {
float: right;
margin-top: -80px;
}
.c3 {
margin-top: -15px;
}
.c4 {
float: right;
margin-top: -79px;
}
.c5 {
margin-top: -13px;
}
.c6 {
float: right;
margin-top: -81px;
}
.P2 p {
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 2rem;
padding-right: 100px;
}
.p2c2 {
float: right;
margin-top: -218px;
}
.p2c4 {
float: right;
margin-top: -149px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<!-- STYLESHEET -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-heading">
<h1>Refresh Me</h1>
</div>
<div class="container">
<div class="P1">
<p>Player 1</p>
<div class="dice">
<div class="circle"></div>
<div class="circle c2"></div>
<div class="circle c3"></div>
<div class="circle c4"></div>
<div class="circle c5"></div>
<div class="circle c6"></div>
</div>
</div>
<div class="P2">
<p>Player 2</p>
<div class="dice">
<div class="circle"></div>
<div class="circle p2c2"></div>
<div class="circle c3"></div>
<div class="circle p2c4"></div>
<div class="circle c5"></div>
<div class="circle c6"></div>
</div>
</div>
</div>
</body>
</html>
In the snippet above, you can see the properties of the p tag.
Even though I added padding-right but it's still not moving.
You are using padding-right and the p tag get padding from the right side!
and your P1 class has 30% width and you cant see the padding from right side. If you give it padding-right 1000px Or less width of P1 class you can see the change
But I think you want to padding it from the left side :) so you should use padding-left
I cannot get three texts centered on the same line: “5/1 ARM”, “30 Year Fixed” and “15 year fixed”. As you can see, the “30 year fixed” is much higher.
I am very new to this, so I have tired everything I know thus far.
.loans {
margin-top: 15%;
padding-bottom: 150px;
background-color: lightblue;
}
.loans h1 {
text-align: center;
margin-bottom: 0;
}
.loanLenghs {
clear: both;
display: inline-block;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 0;
}
.rates {
clear: both;
display: inline-block;
width: 100%;
float: right;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
HTML:
<div class="loans">
<h1>Our awesome rates!</h1>
<div class="loanLenghs">
<p style="margin-bottom: 0;">30 Year Fixed</p>
<p style="float: left">15 Year Fixed</p>
<p style="float: right;">5/1 ARM</p>
</div>
<div class="rates">
<p style="float: right">%4.552</p>
<p style="float: left">%3.999</p>
<p style="text-align: center;">%5.332</p>
</div>
</div>
</body>
I expected the “30 year loan” to be on the same line as the others.
Simply use flex
.loans {
margin-top: 15%;
padding-bottom: 150px;
background-color: lightblue;
}
.loans h1 {
text-align: center;
margin-bottom: 0;
}
.loanLenghs,.rates {
display: flex;
}
.loanLenghs p, .rates p {
flex-grow: 1;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
HTML:
<div class="loans">
<h1>Our awesome rates!</h1>
<div class="loanLenghs">
<p style="">15 Year Fixed</p>
<p style="">30 Year Fixed</p>
<p style="">5/1 ARM</p>
</div>
<div class="rates">
<p>%4.552</p>
<p >%3.999</p>
<p>%5.332</p>
</div>
</div>
</body>
Change this line in your CSS file
.loanLenghs {
clear: both;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 0;
}
.loanLenghs p {
display: inline-block;
}
And Also, remove the inline CSS
<p>30 Year Fixed</p>
<p style="float: left">15 Year Fixed</p>
<p style="float: right;">5/1 ARM</p>
You can use this code
body {
margin: 0;
padding: 0;
}
.loans {
margin-top: 15%;
padding-bottom: 150px;
background-color: lightblue;
}
.loans h1 {
text-align: center;
margin-bottom: 0;
}
.loanLenghs {
clear: both;
display: inline-block;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 0;
}
.rates {
clear: both;
display: inline-block;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 0;
}
.left {
width: 30%;
display: inline-block;
}
.center {
width: 30%;
display: inline-block;
}
.right {
width: 30%;
display: inline-block;
}
<div class="loans">
<h1>Our awesome rates!</h1>
<div class="loanLenghs">
<p class="left">30 Year Fixed</p>
<p class="center">15 Year Fixed</p>
<p class="right">5/1 ARM</p>
</div>
<div class="rates">
<p class="left">%4.552</p>
<p class="center">%3.999</p>
<p class="right">%5.332</p>
</div>
</div>
I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}