Ok so here is my question i have a website and in the middle i have a section and a aside. every thing else on the page is 100% but the section and aside i want to equal 80% and me aligned next to each other in the middle. but instead i get this.
IMAGE: https://twitter.com/iamalecgrogan/status/392454057345810432/photo/1
before you start saying stuff i have tried every thing doing table-cell and table verticaly align and in-line block elemets creating a div for them to go into. but nothing is working please help. here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Home | ProvideWebDesign
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<div id="header_right">
</div>
<div id="header_left">
</div>
</header>
<nav id="nav">
</nav>
<section id="section">
<article id="section_article">
</article>
<article id="section_article2">
</article>
</section>
<aside id="aside">
<article id="aside_article">
</article>
<article id="aside_article2">
</article>
<article id="aside_article3">
</article>
</aside>
<footer id="footer">
<div id="footer_right">
</div>
<div id="footer_left">
</div>
</footer>
</div>
</body>
</html>
CSS--------------------
*
{
margin: 0px;
padding: 0px;
}
#wrapper
{
width: 100%;
height: 875px;
display: table;
}
#header
{
width: 100%;
height: 75px;
display: block;
}
#header_right
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#header_left
{
width: 50%;
height: 75px;
float: left;
display: block;
}
#nav
{
width: 100%;
height: 50px;
display: block;
}
#section
{
width: 60%;
height: 600px;
float: left;
display: table-cell;
}
#aside
{
width: 20%;
height: 600px;
float: left;
display: table-cell;
}
#footer
{
width: 100%;
height: 150px;
display: block;
clear: both;
}
#footer_right
{
width: 50%;
height: 150px;
float: left;
display; block;
}
#footer_left
{
width: 50%;
height: 150px;
float: left;
display: block;
}
Create a containing element such as a div around the section and aside, give that container a width of 80%, block display, and margin auto. Lose the table-cell display on the section and aside. Give the container a clear fix: https://gist.github.com/jelmerdemaat/3804403
Related
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%;
}
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
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 am making a web app and I am needing the 4x links that are located in the middle column to be evenly spaced vertically and for the text inside the links to be horizontally and vertically centerd as-well.
The below picture is what I am after, please note that the website is going to be responsive. I want to avoid using flexbox at this stage as I have been running into some browser compatibility problems.
CodePen Demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<img src="imgs/logo-blue.png" />
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
<section class="control-container">
<div class="column left">
</div>
<div class="column middle">
<nav>
<ul>
<li>
<i class="fa fa-chevron-down"></i>
START
STOP
PAUSE
</li>
</ul>
</nav>
</div>
<div class="column right">
</div>
</section>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font: 100% arial;
overflow: hidden;
}
#media all and (max-width: 150em) {
header {
width: 100%;
height: 5vh;
background: black;
}
header img {
height: 100%;
}
iframe {
width: 100%;
height: 65vh;
display: block;
}
.control-container {
width: 100%;
height: 30vh;
background: black;
display: table;
}
.column {
display: table-cell;
color: white;
width: 100%;
text-align: center;
}
.row {
display: block;
width: 100%;
}
.left {
background: yellow;
width: 33.3%;
height: 100%;
}
.middle {
background: black;
width: 33.3%;
height: 100%;
}
.right {
background: red;
width: 33.3%;
height: 100%;
}
nav ul {
height: 100%;
margin: 0;
padding: 0;
}
nav li {
display: block;
}
nav a {
color: white;
text-decoration: none;
text-align: center;
width: 100%;
padding: 30px;
}
nav a:hover {
background: green;
}
}
Try using display: table and display: table-row
.column.middle ul,.column.middle nav,.column.middle li {
height: 100%;
}
.column.middle li {
display: table;
width: 100%;
}
.column.middle li a {
display: table-row;
width: 100%;
}
Working Fiddle
The above solution will work but as you can see the menu items are not vertically centered. To make them centered, I wrapped the menu items contents with a div element. and added the following css:
.column.middle li a div {
display: table-cell;
vertical-align: middle;
}
Updated Fiddle