I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I am trying to make two divs one div takes up 1/3 of the page and the other takes up 2/3 of the page but when I use float:left and float:right the div on the right has a strange gap above it. I am trying to make the width 1440px for now and transform it the percentage later. Does anyone know why it's doing this?
HTML:
main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 80px;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:400px;
}
.height2{
height: 300px;
}
.height3{
height:420px;
}
.column1{
width: 480px;
background-color: #000;
}
.column2{
width: 960px;
background-color: coral;
}
.float-left{
float:left;
}
.float-right{
float: right;
}
.red{
background-color: #d11242;
}
.blue{
background-color: #00447c;
}
.gray{
background-color: #717073;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
<link href="CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<header>
<nav class="float-right">
</nav>
</header>
<div class="height1 row1 red">
<div class="height1 column1 float-left"></div>
<div class="height1 column2 float-right"></div>
</div>
<div class="height2 row1 blue"></div>
<div class="height3 row1 gray"></div>
</main>
</body>
</html>
Your header nav element is causing the displacement.
Check your nav styles and remove either the margin or the fixed height. Another option would be to change the height to 100% and remove the margin and use padding with a box-sizing change.
<main>
<header>
<nav class="float-right">
</nav>
</header>
<div class="height1 row1 red content-wrapper">
<div class="height1 column1 float-left"></div>
<div class="height1 column2 float-right"></div>
</div>
<div class="height2 row1 blue"></div>
<div class="height3 row1 gray"></div>
</main>
main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 80px;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:400px;
}
.height2{
height: 300px;
}
.height3{
height:420px;
}
.column1{
width: 480px;
background-color: #000;
}
.column2{
width: 960px;
background-color: coral;
}
.float-left{
float:left;
}
.float-right{
float: right;
}
.red{
background-color: #d11242;
}
.blue{
background-color: #00447c;
}
.gray{
background-color: #717073;
}
.content-wrapper{
position: relative;
display: block;
width: 100%;
background: red;
overflow: hidden;
}
I guess the problem is with your height pixels. You should not give height as pixels. Instead of pixels try using in %. I have made some changes in CSS, can try that.
main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 30%;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:100%;
}
.column1{
width: 480px;
background-color: #000;
}
.column2{
width: 960px;
background-color: coral;
}
.float-left{
float:left;
}
.float-right{
float: right;
}
.red{
background-color: #d11242;
}
.blue{
background-color: #00447c;
}
.gray{
background-color: #717073;
}
Can you please check the below code link? Hope it will work for you. This issue occurs as you have given fixed height in header and more margin to nav so, nav overflows outside of the header.
Please refer to this link: https://jsfiddle.net/yudizsolutions/8gxLu2mn/1/
main {
width: 1440px;
margin: 0px auto;
float: left;
}
header {
height: 80px;
background-color: cadetblue;
}
nav {
background-color: darkslategray;
height: 50px;
margin: 15px;
width: 200px;
}
.row1 {
margin: 0px auto;
}
.height1 {
height: 400px;
}
.height2 {
height: 300px;
}
.height3 {
height: 420px;
}
.column1 {
width: 480px;
background-color: #000;
}
.column2 {
width: 960px;
background-color: coral;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.red {
background-color: #d11242;
}
.blue {
background-color: #00447c;
}
.gray {
background-color: #717073;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
<link href="CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<header>
<nav class="float-right">
</nav>
</header>
<div class="height1 row1 red">
<div class="height1 column1 float-left"></div>
<div class="height1 column2 float-right"></div>
</div>
<div class="height2 row1 blue"></div>
<div class="height3 row1 gray"></div>
</main>
</body>
</html>
I want to have the right column of the main body to be split into two. At the moment I only would like a bottom border showing as an outline but can't get it to work. It is the #map section that I would like to change.
I have tried a couple of different things but can't figure it out, I have probably just missed something but I can't figure out what.
HTML Code:
<!DOCTYPE HTML>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.mainSect {
height: 200%;
background-color: #FEDB00;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
opacity: .6;
position: relative;
margin-top: -12px;
border: 2px solid black;
}
#news {
position: absolute;
width: 70%;
height: 100%;
border-right: 2px solid black;
}
#map {
position: absolute;
width: 20px;
height: 20px;
margin-left: 600px;
border-bottom: 2px solid black;
}
</style>
<html>
<head>
<title>Waitemata FC - NEWS </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
NEWS
<a href="index.html">TEAMS
<ul class="subMenu">
<li>Juniors</li>
<li>Youth</li>
<li>Seniors</li>
</ul>
</a>
REGISTRATION
GALLERY
SPONSORS
ABOUT
</div>
<div class="imgSect">
<img class="logo" src="img/logo.png" alt="Waitemata AFC Logo" />
<p class="name">WAITEMATA AFC </p>
</div>
FaceBook Page
<div class="mainSect">
<div id="news">
</div>
<div class="map">
<p>test </p>
</div>
</div>
<footer>
</footer>
</body>
</html>
First, to divide the main body, you must have a container section and inside it to have the right & left columns,
For Ex:
<body>
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="column-header">
</div>
</div>
</div>
</body>
<style type="text/css">
body {
width: 100%;
height: auto;
}
.container {
width: 1200px;
/*for ex. height:auto;*/
padding-right: 20px;
padding-left: 20px;
}
.left-column {
width: 70%;
/*or in px;*/
height: auto;
float: left;
}
.right-column {
width: 30%;
height: auto;
float: left;
}
.column-header {
width: 100%;
height: 50px;
/*change it as you wish;*/
}
</style>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.
So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>FunPic - Share your pictures</title>
</head>
<body>
<div class="container">
<div id="header">
<div id="navtext">
<p>FunPic - Share your pictures</p>
</div>
<div id="menu">
<ul id="navbar">
<li>Inicio</li>
<li>Subir Foto</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
</div>
</div>
<div id="footer">©Fun Pic 2015 - Costa Rica</div>
</body>
</html>
Here's the CSS:
{
max-width: 1024px;
color: red;
margin: auto;
}
html, body {
width: 100%;
margin: 0 auto;
height: 100%;
}
.container {
margin: 0 auto;
width: 100%;
background-color: #E8E8E8;
height: 100%;
}
#header {
margin-bottom: 30;
width: 100%;
height: 50px;
float: left;
background: #8AE6B8;
}
#navtext {
padding: 14;
width: 40%;
float: left;
}
#navtext p {
margin-left: 40%;
}
#menu {
padding: 14;
width: 40%;
float: left;
}
#navbar {
margin-left: 65px;
width: 100%;
float: left;
}
#navbar li {
list-style: none;
margin-right: 10;
display: inline-block;
}
#wrapper {
margin: 30;
width: 100%;
float: left;
}
#content {
margin: 0 auto;
width: 40%;
height: 600px;
display: block;
}
#image {
width: 100%;
margin: 0 auto;
}
#image img {
width: 100%;
}
#footer {
margin: auto;
width: 100%;
height: 50px;
text-align: center;
background-color: #202020;
clear: both;
}
Do it like this
#wrapper {
background-color: #E8E8E8;
}
change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.
I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...
I need the #infoBar div and the #actualCover div to sit to the right of (next to) the #covers div, but for some reason, the covers div is acting like it's not even there and floats on top of the other divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
border: solid 1px orange;
}
#coverArea
{
border: solid 1px red;
width: 760px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
border: solid 2px #BFDEFF;
padding: 10px;
background-color: #F0F7FF;
margin-right: 30px;
}
#infoBar
{
height: 30px;
border: solid 1px green;
width: 600px;
}
#actualCover
{
width: 794px;
height: 1123px;
background-position: top left;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">
</div>
<div id="infoBar">
</div>
<div id="coverArea">
<div id="actualCover">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Here you go.
As a good practice, get your layout correct first before you set padding and margins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
background: #ccc;
width: 911px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
background-color: #0ff;
}
#infoBar
{
height: 30px;
width: 600px;
float: right;
background: yellow;
}
#coverArea
{
width: 760px;
float: right;
background: #f60;
}
#actualCover
{
width: 794px;
height: 600px;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">Coveres
</div>
<div id="infoBar">InfoBar
</div>
<div id="coverArea">CoverArea
<div id="actualCover">ActualCover
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In this case, it sounds like you want #infoBar and #coverArea to float to the right of #covers instead of #covers floating to the left of the other two.
Try taking the float off of #covers and adding float: right; to #infoBar and #coverArea