I'm making a website and i have been struggling to make two or more <div>'s next to each other.
Here is my code:
/*---MAKE PAGE---*/
body {
background: lightblue;
}
.navbar {
background: lightgreen;
height: auto;
width: 1840px;
float: left;
margin: 20px;
padding-left: 10px;
}
.navbar_objects {
text-decoration: none;
float: left;
}
.navobj {
text-decoration: none;
color: #3399FF;
float: left;
margin: 20px;
}
.navobj:hover {
color: white;
}
#title_of_page {
color: darkblue;
margin: 20px;
padding-left: 880px;
}
.title {
padding-top: 1px;
height: 75px;
width: 1850px;
background: lightgreen;
margin: 20px;
}
#title_recent {
color: darkblue;
margin: 20px;
padding-left: 300px;
padding-bottom: 20px;
}
.main {
height: 2000px;
width: 1810px;
background: lightgreen;
padding: 20px;
padding-left: 200px;
margin: 20px;
}
/*---END---*/
/*----------------START DESCRIPTIONS----------------*/
/*---START FIFA DESCRIPTION---*/
#image_div_recent_fifa16 {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_fifa16 {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/
/*---START NBA CODE---*/
#image_div_recent_nba {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_nba {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/
/*----------------CODE FOR POSTS----------------*/
/*---START FIFA POST CODE---*/
#post_fifa {
width: 250px;
height: 450px;
padding: 20px;
margin: 10px;
}
#post_fifa:hover {
border: solid black 1px;
}
/*---END---*/
/*---START NBA POST CODE---*/
#post_nba {
width: 250px;
float: up;
height: 450px;
margin: 10px;
padding: 20px;
}
#post_nba:hover {
border: solid black 1px;
}
<html>
<head>
<title>GameGo - Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navbar">
<li class="navbar_objects">
<a class="navobj" href="index.html">Home</a>
<a class="navobj" href="games.html">Games</a>
<a class="navobj" href="reviews.html">Reviews</a>
<a class="navobj" href="contactus.html">Contact Us</a>
</li>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="title">
<h1 id="title_of_page">Home</h1>
</div>
<div class="main">
<h2 id="title_recent">Recent</h2>
<br>
<div class="posts">
<div id="post_fifa">
<div class="image_div_recent_fifa16">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>
<div id="text_div_recent_fifa16">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>
</div>
<div id="post_nba">
<div class="image_div_recent_nba">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>
<div id="text_div_recent_nba">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>
</div>
<br>
<br>
</div>
</div>
</body>
</html>
I would like to put post_fifa next to post_nba.
Try adding display: inline-block to your elements:
#post_nba, #post_fifa {
display: inline-block;
}
https://jsfiddle.net/L8w1owr4/
One more solution, float your content divs:
#post_fifa,
#post_nba {
float: left;
}
and, please, correct your navbar, now code is invalid! You can make:
<ul class="navbar_objects">
<li><a class="navobj" href="index.html">Home</a></li>
<li><a class="navobj" href="games.html">Games</a></li>
<li><a class="navobj" href="reviews.html">Reviews</a></li>
<li><a class="navobj" href="contactus.html">Contact Us</a></li>
</ul>
with css classes:
.navbar_objects {
list-style-type: none;
display: inline-block;
}
li {
display: inline;
}
.navobj {
text-decoration: none;
color: #3399FF;
margin: 20px;
}
jsfiddle-link
Related
How the page layout should look^
As shown by the screenshot, the two images in this html code are making a white space on the right side of the page. There is no padding nor does the image itself extend beyond where it apparently does - what is causing this unnecessary white space and how do I remove it?
CSS below:
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
margin: 0;
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
/** {*/
/*background: #000 !important;*/
/*color: #0f0 !important;*/
/*outline: solid #f00 1px !important;*/
/*}*/
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.leftSide {
position: relative;
float: left;
width: 55%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: left;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: right;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.rightSide {
position: relative;
float: right;
width: 45%;
}
.form {
border-radius: 5px;
position: relative;
float: left;
background-color: #F7F6F6;
width: 50%;
padding: 20px;
height: 120%;
border: 20px black;
}
.insideForm {
background-color: white;
border: black 5px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
margin-right: 0px;
max-width: 100%;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
max-width: 100%;
height: auto;
}
.centerDiv {
position: relative;
text-align: center ;
}
.footer {
width: 100%;
height: 100px;
background-color: #303233;
z-index: 10;
margin-top: 1000px;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:900px)">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="leftSide">
<div class="centerDiv"><h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2></div>
<img src="748A5226_RT.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<p class="Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</p>
<div class="leftPicture1">
<img src="img.jpeg" width="95%">
</div>
<div class="leftPicture2">
<img src="img3.jpg" width="95%">
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv"><h2> Find out more today </h2></div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="Swimming%20pool.jpg" width="95%">
</div>
<div class="rightPicture2">
<img src="Monte_Rei_Exterior_01_Jack_Hardy_2018.jpg" width="95%">
</div>
</div>
<div class="footer">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
</div>
</body>
</html>
Is there anything that I am missing here? I have had this problem before and I was unable to fix it.
EDIT: New screenshot showing supersized image
Have you tried
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It seems like you are struggling with box model sizes
https://www.w3schools.com/css/css3_box-sizing.asp
You have added a width of 95% to the img tag:
<img src="img.jpeg" width="95%">
Change this to 100% or remove and add to your styles eg:
.leftPicture1 img {
width: 100%;
}
Here is the code. Hope it will help you. if any changes please let me know.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
* {
margin: 0;
padding: 0;
}
*,
::after,
::before {
box-sizing: border-box;
}
.logo-wrap {
display: flex;
justify-content: space-between;
}
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
.topnav {
padding: 20px;
}
.content-part {
padding: 20px 0;
display: flex;
width: 100%;
}
.left-part {
margin: 15px 0;
padding: 0 20px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.leftSide {
width: 70%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
}
.rightSide {
width: 30%;
}
.left-images {
display: flex;
}
.form {
border-radius: 5px;
background-color: #F7F6F6;
padding: 0 20px 20px 20px;
}
.insideForm {
background-color: white;
padding: 10px;
border: black 5px;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.centerDiv {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.footer {
width: 100%;
height: 80px;
background-color: #303233;
position: relative;
display:flex;
justify-content:space-between;
padding:20px;
}
#media screen and (max-width: 767px) {
.topnav a:not(:first-child) {
display: none;
}
.content-part,.left-images{
display:block;
}
.leftPicture1,.leftPicture2{padding-left:0}
.leftSide,.rightSide{width:100%;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="logo-wrap">
<img src="https://dummyimage.com/100x50/000000/ffffff.png">
<img src="https://dummyimage.com/100x50/ff00ff/ffffff.png">
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="content-part">
<div class="leftSide">
<div class="centerDiv">
<h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2>
</div>
<img src="http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="left-part">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<div class="points-Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</div>
</div>
<div class="left-images">
<div class="leftPicture1">
<img src="http://lorempixel.com/output/nature-q-c-640-480-6.jpg" width="100%">
</div>
<div class="leftPicture2">
<img src="http://lorempixel.com/output/technics-q-c-640-480-5.jpg" width="100%">
</div>
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv">
<h2> Find out more today </h2>
</div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input type="text" id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="http://lorempixel.com/output/business-q-c-640-480-8.jpg" width="100%">
</div>
<div class="rightPicture2">
<img src="http://lorempixel.com/output/transport-q-c-640-480-3.jpg" width="100%">
</div>
</div>
</div>
<div class="footer">
<img src="logo.png">
<img src="icon.png">
</div>
</body>
</html>
#font-face {
font-family: Raleway;
src: url(../font/Raleway-Regular.ttf);
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
color: black;
font-family: 'Raleway';
background-color: white;
scroll-behavior: smooth;
}
/* Navigation */
.nav {
color: white;
min-height: 70px;
line-height: 70px;
text-align: left;
background-color: #222629;
border-bottom: 3px solid #86C232;
}
.menu a {
float: left;
text-decoration: none;
color: white;
line-height: 40px;
height: 40px;
padding: 5px 12.5px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
}
.menu a:hover {
background-color: #6B6E70;
text-decoration: underline;
text-decoration-color: #86C232;
}
.logo {
padding: 0 5px 0 5px;
font-size: 34px;
}
.logo a {
color: #86C232;
}
.logo a:hover {
background-color: #222629;
}
label {
margin: 0 0 0 20px;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: left;
}
#toggle {
display: none;
}
/* Search Bar */
.search-box {
position: absolute;
top: 3.5%;
left: 97.5%;
transform: translate(-50%, -50%);
background-color: #2F3640;
height: 30px;
border-radius: 30px;
padding: 10px;
}
.search-box:hover {
left: 92%;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
color: #E84118;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #2F3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
text-decoration: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 0px;
}
/* Content Div */
#welcome {
width: 100%;
height: auto;
}
.welcome {
color: white;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
padding-top: 10%;
}
.content {
margin: 0 12.5% 0 12.5%;
}
.categories-box-1,
.categories-box-2 {
display: flex;
flex-direction: column;
}
h3 {
padding-left: 20%;
text-align: center;
text-decoration: underline;
}
.boxes {
margin: 10px;
width: 80%;
}
.boxes a {
text-decoration: none;
color: black;
}
.boxes ul {
padding-left: 35%;
}
.boxes ul li {
list-style: none;
padding: 5px 10px 5px 10px;
}
.boxes ul li a:hover {
border-bottom: 2px solid #86C232;
}
/* Footer */
.footer {
color: white;
float: left;
width: 100%;
text-align: center;
background-color: #222629;
}
/* Media Query */
#media only screen and (max-width: 1400px) {
/* Navigation */
label {
display: block;
cursor: pointer;
}
.menu {
margin: 0;
width: 100%;
display: none;
text-align: center;
background-color: #222629;
}
.menu a {
float: none;
clear: left;
display: block;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #EAEAEB;
margin: 0;
padding: 0;
}
.menu a:hover {
background-color: #6B6E70;
text-decoration: underline;
text-decoration-color: #86C232;
}
.menu .border-nav {
border-top: 1px solid #EAEAEB;
}
#toggle:checked+.menu {
display: block;
}
.logo {
float: right;
padding-right: 20px;
padding-top: 10px;
}
.logo a {
border: none;
}
.search-bar-input {
padding-right: 38%;
}
/* Content */
.categories-box-1,
.categories-box-2 {
display: flex;
flex-direction: column;
}
.boxes {
width: 95%;
}
.boxes ul {
padding-left: 20%;
}
}
#media only screen and (max-width: 680px) {
.search-bar-input {
padding-right: 8%;
padding-bottom: 3.5%;
}
content {
margin: 0 5% 0 5%;
}
#showcase #welcome {
margin-top: -19px;
}
.boxes ul {
padding-left: 20%;
}
}
#media only screen and (max-width: 480px) {
.search-bar-input {
padding-right: 8%;
padding-bottom: 3.5%;
}
.content {
margin: 0 2% 0 2%;
}
h3 {
padding-left: 0;
}
.boxes ul {
padding-left: 2%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home | Physical Model </title>
<!--Website CSS-->
<link href="css/collapse.css" type="text/css" rel="stylesheet">
<!-- Icon CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="css/application.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<div class="logo"><a><i class="fa fa-cog" ></i></a></div>
Home
Construction
Dynamics
Fluids
Heat Transfer
Material Science
Mechanics
Statics
Thermodynamics
</div>
</div>
</nav>
<div class="container-4">
<div class="search-box">
<input class="search-txt" type="text" placeholder="Search..." name="">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</div>
<content>
<div id="showcase">
<img id="welcome" src="img/welcome.jpg" width="1900px" height="900px">
</div>
<div class="content">
<div class="categories-box-1">
<div id="box-1" class="boxes">
<section id="construction">
<h3>Construction</h3>
<ul>
<li>Crane Rigging Angles</li>
<li>Excavation and Earthwork Pressure</li>
</ul>
</section>
</div>
<div id="box-2" class="boxes">
<section id="dynamics">
<h3>Dynamics</h3>
<ul>
<li>Collision and Deformation: When Worlds Collide</li>
<li>General Planar Motion: Armor Attack</li>
<li>General Planar Motion: The Helicopter</li>
<li>General Planar Motion: The Oil Rig</li>
<li>General Planar Motion: The Slider</li>
<li>General Planar Motion: The Tank</li>
<li>Projectile Motion</li>
<li>Rectilinear Motion</li>
<li>Relative Motion: Choo Choo Train</li>
<li>Rotation: No Slip Wheel</li>
<li>Rotation and Moment of Inertia: A Day at the Races</li>
<li>Rotational Kinematics: The Ferris Wheel</li>
</ul>
</section>
</div>
<div id="box-3" class="boxes">
<section id="fluids">
<h3>Fluids</h3>
<ul>
<li>Fluid Properties</li>
<li>Head Loss</li>
<li>Hydrostatics</li>
<li>Internal Flow and Losses</li>
<li>Laminar and Turbulent Flow: Smoke Tunnel</li>
</ul>
</section>
</div>
<div id="box-4" class="boxes">
<section id="heattran">
<h3>Heat Transfer</h3>
<ul>
<li>Conservation of Energy: Ice Melting Blocks</li>
<li>Radiant Energy: Parabolic Concentrator</li>
</ul>
</section>
</div>
</div>
<div class="categories-box-2">
<div id="box-5" class="boxes">
<section id="matsci">
<h3>Material Science</h3>
<ul>
<li>Deformation: Bending a Knife Blade</li>
<li>Deformation: Shape Memory Alloys</li>
<li>Primary and Secondary Creep: Creepy Plastic</li>
</ul>
</section>
</div>
<div id="box-6" class="boxes">
<section id="mechanics">
<h3>Mechanics</h3>
<ul>
<li>Axial Strain</li>
<li>Beam Bending: Foam Beam</li>
<li>Design of Axial Members</li>
<li>Elastic vs. Plastic</li>
<li>Load Conditions: Rubber Shapes</li>
<li>Paper Stress Concentrations</li>
<li>Shear Demonstrator</li>
<li>Stress/Strain: A Strainge Transformation</li>
<li>Stress/Strain Transformation: The Big Book of Shear</li>
<li>Thermal Expansion</li>
<li>Thin Wall Pressure Vessels - Balloons</li>
<li>Thin Wall Pressure Vessels - Hot Dogs</li>
<li>Thin Wall Pressure Vessels
<li>Torsion: Tower of Torque</li>
</ul>
</section>
</div>
<div id="box-7" class="boxes">
<section id="statics">
<h3>Statics</h3>
<ul>
<li>Concentrated Cable Loads: The Ski Gondola</li>
<li>Coulomb Friction: Fun with Friction</li>
<li>Force Vector: Amazing Weight Loss Program</li>
<li>Frame Demos</li>
<li>Friction: Belt Friction</li>
<li>Loading: Distributed Student Loading</li>
<li>Mechanical Advantage: Pulleys - Equilibrator Challenge</li>
<li>Mechanical Advantage: The Torque Tester</li>
<li>Moments: Lug Wrench vs. Breaker Bar</li>
<li>Moments: Moments and Couples</li>
<li>Moments: The Persuader</li>
<li>Moments: Varignon's I-Beam</li>
<li>Truss Design: K'NEX Trusses</li>
<li>Truss Design: Ruler Truss</li>
<li>Truss Design: Wacky Fun Noodle</li>
<li>Truss Design: Wooden Truss 2D</li>
<li>Truss Design: Wooden Truss 3D</li>
<li>Uniformly Loaded Cables</li>
<li>Zero Force Members</li>
</ul>
</section>
</div>
<section id="thermodynamics">
<div id="box-8" class="boxes">
<h3>Thermodynamics</h3>
<ul>
<li>2nd Law - Direction</li>
<li>2nd Law - Losses</li>
<li>Boiling Point: The Hand Boiler</li>
<li>Boiling Properties</li>
<li>Closed vs. Open Systems</li>
<li>Conservation of Mass: Molasses Madness</li>
<li>Density and Buoyancy: The Lava Lamp</li>
<li>Otto Cycle: Engine Knock</li>
<li>Psychrometry</li>
<li>Total Energy - Fan Box</li>
<li>Total Energy</li>
<li>Vapor Power Cycle: The Little Engine That Could</li>
</ul>
</div>
</section>
</div>
</div>
</content>
<footer>
<div class="footer">
<p>Tyler Kautz, Trevor Swann, Jacob Stambaugh. Copyright © 2019. Some Rights Reserved.</p>
</div>
</footer>
</body>
</html>
I am having trouble with my search bar icon. It is shifting down when I hover over it. Can anyone tell me why and how to fix it? I have messed with margins and everything to try and get it fixed but nothing is working. I've also included a link below if that helps.
https://jsfiddle.net/tylerk9001/eb42nofx/
Change this:
.search-box {
position: absolute;
top: 3.5%;
right: 0;
background-color: #2F3640;
height: 30px;
border-radius: 30px;
padding: 10px;
}
Delete this:
.search-box:hover {
left: 92%;
}
So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
I am working on a page and I'm trying to make an image of an iphone be directly to the right of the header, paragraph and call to action (searchbar, searchbutton) like so:
But the image keeps getting pushed down into the next module.
What can I do to put the phone image in the right place?
#hero {
background-color: #62CE9C;
display: inline-block;
height: 600px;
margin: 0px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero img {
float: left;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
width: 290px;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
width: 330px;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 10px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetone img {
float: left;
}
#tweetonetext {
float: left;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 900px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
text-align: center;
}
#vocational p {
color: #62CE9C;
display: inline-block;
margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
<img src="images/phone.png"/>
</div>
<div id="functions">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
Try this.
#hero {
float: left;
}
img {
display: block;
float: right;
}
How about using a two column layout?
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I know this question has been frequently asked but I can never seem to get it to work. Can you tell me what's wrong?
I have three divs within a #container div, which I want to centre side by side. The #container is 1000px wide (I want to keep it that way). Here is my code:
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#right {
float: right;
}
#left {
float: left;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
All help would be gladly appreciated.
You can do that quite simple using flexbox:
#container {
/* margin-top: 500px; */
width: 1000px;
margin: 0 auto;
}
.related-article {
background-color: #D6A400;
display: inline-block;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
}
#container {
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
.box {
margin-right: 10px;
width: 230px;
height: 300px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div class="flex-container">
<div id="left" class="box">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center" class="box">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right" class="box">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
</div>
A solution using display: flex. Read more about flexbox here
Apply display: flex to the container
Add flex: 1 to all the child's which are to be centered horizontally.
h2 {
margin-top: 500px;
}
#container {
position: absolute;
width: 1000px;
display: flex;
text-align: center;
}
#container div {
flex: 1;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
<h2>Here's what you'll do!</h2>
<div id="container">
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
Remove all the floats and replace them with :
display: inline-block;
Also, as much as i have tried, with that spacing between divs, you wont be able to display them the right way. Make the space between the #left, #center and #right divs less than 50px, or work with percentage(%).
You may use display:table for that..
You can have Parent div with style
display:table
and your 3 child divs as
display:table-cell
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
display: table;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#left,
#right,
#center {
display: table-cell;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
h2 {
display: table-row;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
remove float from and add display: inline-block to all three, then add text-align: center; to the container.
Try this, and add float:left to your right,left and center div and reduce your margin left and right of center div.
#right {
float: left;
}
#left {
float: left;
}
#center {
margin-left: 85px;
margin-right: 85px;
float:left;
}
Instead adding center, left and right. Use ul and set the width of li in percentage. It will improve the code and reduce the css code.
The codepen url is http://codepen.io/SESN/pen/pbbjrb
CSS
#container { width: 100%; }
.ulContainer { margin: 0px auto; list-style: none; width: 80%; }
.ulContainer li { width: 33.33%; float: left; }
HTML
<div id="container">
<h2>Here's what you'll do!</h2>
<ul class="ulContainer">
<li>
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</li>
<li>
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</li>
<li>
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</li>
</ul>
</div>