This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I've started learning web development, and for the life of me I cannot figure out how to position my #Info div to the right of the #inputForm div. It's been a good hour, and most places say that if both elements use "display:inline-block" it should work. I am definitely missing something. Any help is greatly appreciated!
header {
background: black;
color: rgb(0, 183, 255);
font-size: 24px;
padding: 10px 10px 1px 10px;
}
h1 {
margin: 0px;
font-size: 28px;
border-bottom: 2px solid currentColor;
/* line at top. TODO: make it turn into wave (D3 library maybe) */
}
h2 {
margin: 0px 0px 0px 30px;
font-size: 14px;
}
body {
margin: 0%;
background: rgb(58, 58, 58);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
color: white;
}
nav {
background: black;
display: flex;
padding: 0px;
float: right;
margin-top: -50px;
/* Because of float */
}
ul {
margin: 0px;
padding: 0px;
}
li {
font-size: 0.8em;
display: inline-block;
/* Horizontal menu */
}
/* All input */
#inputForm {
display: inline-block;
background-color: darkgoldenrod;
}
#inputForm * {
/* targets everything inside */
margin: 5px;
}
#inputForm input {
width: 42px;
background-color: darkred;
}
.DataInput {
width: 4%;
background-color: gray;
}
.waveform {
float: left;
background-color: darkorchid;
}
.waveform label {
display: inline-block;
margin: 0px;
padding: 0px;
}
#dataContainer {
background-color: black;
}
#waveformContainer {
display: inline-block;
background: darkgreen;
}
.Info {
display: inline-block;
background-color: darkmagenta;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Additive Generator</title>
</head>
<body>
<header>
<h1> Generate a waveform</h1>
<h3> an <em>audio-visual</em> experience </h2>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Create</li>
</ul>
</nav>
</header>
<form id="inputForm">
<div id="dataContainer">
<div>
<label>Harmonics</label>
<input class="DataInput" type="number" value="10">
</div>
<div>
<label>Amplitude</label>
<input class="DataInput" type="number" value="10">
</div>
<div>
<label>Frequency</label>
<input class="DataInput" type="number" value="10">
</div>
</div>
<div id="waveformContainer">
<div class="waveform">
<label for "Square">Square</label>
<!-- Insert Image-->
<input name="waveform" type="radio" value="1">
</div>
<div class="waveform">
<label for "Saw">Saw</label>
<input name="waveform" type="radio" value="2">
</div>
<div class="waveform">
<label for "Mix">Mix</label>
<input name="waveform" type="radio" value="3">
</div>
</div>
</form>
<div class="Info">
The new section The sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new section
</div>
</body>
</html>
https://jsfiddle.net/gr7kx3th/
Your div with "info" class and the form with id "infiForm" should been wrapped within same div and then you can position them with float css property. provide float: "left" property to form and provide float: "right" property to div having "info" class.
Other way to align them is flex property by using the following link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 1 year ago.
When I apply background-color to a section, it leaves white spaces on the right and left side of the element.
I want to remove them so that the background-color fills out the whole width of the section.
I think I could solve it with extra padding, but is that the right thing to do?
Maybe I am blind, but I also did not find any CSS from the parent elements, which mess up the CSS from the section. I attached the CSS and HTML down below. I believe the error is caused by the CSS.
HTML:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/style.css">
<header id="header">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Logo">
<nav id="navbar">
<ul id="nav-list">
<li><a class="nav-link" href="#newsletter">Newsletter</a></li>
<li><a class="nav-link" href="#video">Video</a></li>
<li><a class="nav-link" href="#privacy">Privacy</a></li>
</ul>
</nav>
</header>
<body>
<section id="newsletter">
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<label for="email">Subscribe to our newsletter!</label>
<br>
<input type="email" id="email" placeholder="Your E-Mail" required>
<br>
<input type="submit" id="mail-news-submit" value="Subscribe!">
</form>
</section>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
/* Debugger for unwanted CSS properties. Source: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
*/
:root {
--smoky-black: #191516ff;
--green-sheen: #72bda3ff;
--apricot: #ffcab1ff;
--brick-red: #ce4257ff;
--little-boy-blue: #72a1e5ff;
font-family: 'Roboto', sans-serif;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background-color:white;
width: 100vw;
height: 2.5vw;
top: 0;
left: 0;
}
#nav-list {
padding-right: 1vw;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: grey;
}
#nav-list li {
list-style: none;
display: inline-block;
}
#header-img {
width: 20vw;
}
#newsletter {
text-align: center;
padding-top: 3vw;
background-color: var(--apricot);
margin: 0;
}
#email, #mail-news-submit {
margin-top: 0.3vw;
margin-bottom: 0.3vw;
}
#mail-news-submit {
color: white;
background-color: var(--smoky-black);
padding: 0.5em 1em;
border-radius: 10em;
border: none;
}
You have to remove margin and padding from the body which is set by default.
Let me know if that helps. If yes, please mark my answer as accepted.
body {
margin: 0;
padding: 0;
}
There is margin set by default by browser- user agent stylesheet.(8px in Google Chrome)
You need to set the margin to body to 0 as mentioned in above answer.
body {
margin: 0;
}
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
I am trying to fix my content inside my div tag. I have only fit in some of the content inside it, but there is more that needs to be put inside it. I need help.
Note I am doing Angular but I need to fix my HTML & CSS only.
My HTML
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
CSS
.button {
padding: 20px 30px;
font-size: 25px;
background-color: lightblue;
position: relative;
top: 28em;
left: 3em;
}
.button:hover {
padding: 22px 32px;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
padding: 20px;
font-size: 30px;
border: 3px black inset;
text-align: center;
position: relative;
top: 3em;
}
Output
You can see the two buttons are not within the div (in grey). How do I expand the div so it will be behind the buttons, providing the background for all the content?
Thanks!
You need to replace your top styles with margin as shown in the fiddle https://jsfiddle.net/saksham_malhotra/cnLrv87f/
By providing top coordinates with position relative, you are shifting your element position without considering the containing element.
It's because you're using position: relative for your address bar and buttons. This shifts that element down by whatever your top value is, relative to where it's normal position is. I would use margin-top to achieve the same effect for your purpose.
.button {
padding: 20px 30px;
font-size: 25px;
background-color: lightblue;
}
.button:hover {
padding: 22px 32px;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
padding: 20px;
font-size: 30px;
border: 3px black inset;
text-align: center;
margin-top: 3em;
}
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
You can read more about the position property here
Try this:
<html>
<head>
<style>
textarea {
width:100%;
max-width:250px;
padding: 0 0 80px 0;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
/*some style*/}
.button {/*button style here*/}
</style>
</head>
<body>
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<textarea class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus></textarea>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
</body>
</html>
So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.
My Html
My CSS
/*color palette: abls
[lightest to darkest]
#eeeeee
#eaffc4
#b6c399
#6a856a
#333333
*/
body {
background-color: #333333;
font-family: monospace;
display: flex;
justify-content: center;
}
div {
/*background-color: red;*/
width: 100%;
height: 100%;
justify-content: center;
}
/*aesthetics for header*/
.Ghead {
font-size: 250%;
color: #eeeeee;
font-weight: lighter;
text-align: center;
border-color: red;
}
/*color for the 3 lines*/
hr:nth-child(1) {
border-color: #eaffc4;
max-width: 20%;
}
hr:nth-child(2) {
border-color: #b6c399;
max-width: 25%;
}
hr:nth-child(3) {
border-color: #6a856a;
max-width: 30%;
}
/*style for radio button container*/
.mGalD {
position: relative;
/*background-color: blue;*/
display: flex;
}
input[type=radio] {
display:none;
}
/*handles aesthetics of active buttons*/
label {
padding: 5px 7px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
color: #6a856a;
}
input:checked + label {
background-color: #eaffc4;
}
/*handles the appearance of active divs in the display area*/
label + div {
position: relative;
color: red;
border: 2pt solid #eaffc4;
border-radius: 5px;
margin: 5px 0 0 0;
display: none;
max-width: 50%;
}
input:checked + label + div {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./NewbTests.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
<title>Viewport</title>
</head>
<body>
<div>
<h1>
<!--title and aesthetics for the head of the page-->
<div class="Ghead">
Viewport
<hr>
<hr>
<hr>
</div>
</h1>
<!--Labeled Radio buttons which activate css to reveal divs-->
<div class="mGalD">
<input type="radio" name="gal" id="g1" value="1">
<label for="g1">gallery 1</label><div>one</div>
<input type="radio" name="gal" id="g2" value="2">
<label for="g2">gallery 2</label><div>two</div>
<input type="radio" name="gal" id="g3" value="3">
<label for="g3">gallery 3</label><div>three</div>
</div>
</div>
</body>
</html>
I would have linked a few images to illustrate what is happening but I'm limited in links.
In essence;
Before:
(button 1)(button 2)(button 3)
Upon clicking any button:
(button 1)[_______________________] (button 2)(button 3)
The div shows up on the side of the corresponding button.
I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons
Hope this works
body, html {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(top left, red, orange);
}
span {
display: none;
position: absolute;
max-width: 450px;
left: 17px;
top: 48px;
padding: 3px;
min-height: 30px;
border-top: 1px solid #d3d3d3;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 10px 0 0 0;
background: #e0e0e0;
color: black;
}
label:first-child {
margin-left: 10px;
}
input {
display: none;
}
input:checked + span {
display: initial;
}
h3 {
border-top: 1px solid;
padding-top: 5px;
position: absolute;
top: 150px;
left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>
I want to change my main HTML page. I would like to have the login section at the right side, the paragraph in the middle and the header at the top and in the middle. I tried to change the code in the CSS but nothing.
How it is now:
How I would like to be:
My current website code:
function resetForm() {
// clearing selects
var selects = document.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++)
selects[i].selectedIndex = 0;
return false;
}
window.load(resetForm());
body {
background-color: #ffffff;
margin: 0;
padding: 200px;
}
h3 {
text-align: center;
color: #ff9900;
padding-bottom: 50px;
}
div.container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
div.login#input[type="password"] {
font-size: 20px !important;
border-radius: 2px;
}
input[type="submit"] {
font-size: 18px !important;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #ff9900;
border: solid;
border-radius: 25px;
}
div.login#input[type="reset"] {
font-size: 18px !important;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #ff9900;
border: solid;
border-radius: 25px;
}
#footer {
clear: both;
margin-top: 20px;
border-top: 1px solid black;
padding: 20px 0px;
padding-bottom: 20px;
font-size: 70%;
background-color: black;
color: #ff9933;
text-align: center;
text-decoration: none;
bottom: 40px;
}
<div id="container">
<div id="header"></div>statistics</div>
<!--End of Header-->
<!--Pragraph in the center-->
<div id="p">
<p>
Some text
</p>
</div>
<!--End of Pragraph-->
<div id="content">
<div id="content_right">
<div id="login">
<h3>Login</h3>
<form action="login.php" method="POST">
<label>Username:</label>
<br/>
<input class="inputfield" type="text" name="username" size="30" />
<br />
<br/>
<label>Password:</label>
<br/>
<input class="inputfield" type="password" name="password" size="30" />
<br />
<br/>
<input type="submit" value="Login" name="submit" />
<input type="reset" name="reset" value="Clear" />
</form>
<!--End of Login-->
</div>
<!--End of content right-->
</div>
<!--End of content-->
</div>
</div>
<!--End of Container-->
<div id="footer">
footer
</div>
<!--End of Footer-->
You need to research the display CSS property, this will go a long way to helping you reach what you want.
see http://learnlayout.com/display.html and https://css-tricks.com/almanac/properties/d/display/
P.s
please note that the OP was edited so this no longer displays the page was set as HTML5
In HTML5, which you have, the character encoding is displayed differently:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
P.s.s
As Jamie Barker rightly pointed out, your <div id="header"> is not closed. this will cause problems later on. Just add a </div> underneath the header element.
P.s.s.s
Finally, your CSS:
div.container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
These are all referencing using the period (dot) . or the # symbol. But div.container means "the div containing the container class" but this is not so because the "container" identifier is infact an id NOT a class so you need to adjust all your CSS to reference id rather than class as so:
#this is an id identifier in CSS
.this is a class identifier in CSS
You also do not need to reference the div tag itself, so replace the quoted CSS with this:
#container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
#container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
Is there any reason you aren't using absolute positioning over float?
Place all of your html within a container div and apply the following css:
#container {
position:relative;
left: 0;
top: 0;
margin: 0 auto;
}
All of your html elements within the div then use position: absolute and left and top attributes to position them however you want. If you need to give the container a fixed height and / or width.