I am new to HTML and CSS, and I have a problem that I can't solve. I created a simple 2 column layout, where both columns have the same height depending on content of columns. As you can see, the column1 works perfectly fine but I have problem with column2. I have no idea why that text is not on same level as in column1 and when I change width of my browser window ( shrink it) text in column2 appears out of yellow column. I would understand if width of column 1 would be 100% that it would take it's place but it's not. also when I put larget text into column 2 , that text wont spread across whole width of that yellow column even when the width is larger. I need to somehow put it properly in designe place but I don't know what am I doing wrong.
body {
background-color: #eeeeee;
}
header {
text-align: center;
height: 80px;
width: 100%;
background-color: #eeeeee;
}
#stredovyObal {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
}
#container1 {
float:left;
width: 250px;
background:white;
position:relative;
}
#col1 {
text-align: center;
float:left;
width: 250px;
position:relative;
}
#col2 {
text-align: justify;
float:left;
width:100%;
position: relative;
left: 150%;
}
footer {
float: left;
width: 100%;
height: 1em;
background-color: #007501;
text-align: right;
color: white;
}
footer p {
text-align: right;
color: white;
font: bold;
font: fantasy;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<div id="stredovyObal">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
</div>
</div> <footer></footer>
</div>
</body>
</html>
Could anybody help me?
You can make display:inline-flex; your #container1.What inline-flex does is it displays an element as an inline-level flex container.And make those white column width for 25% and yellow one for 75% to create 100%, and make sure to make, body margin and padding to 0;
Here's the CSS
body {
background-color: #eeeeee;
margin:0;
padding:0;
}
header {
text-align: center;
height: 80px;
width: 100%;
background-color: #eeeeee;
}
#stredovyObal {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
#container1 {
float:left;
width: 100%;
background:white;
position:relative;
display:inline-flex;
}
#col1, #col2 {
padding: 15px;
box-sizing: border-box;
}
#col1 {
text-align: center;
float:left;
width: 25%;
position:relative;
}
#col2 {
text-align: justify;
float:left;
width: 75%;
position: relative;
background:yellow;
}
footer {
float: left;
width: 100%;
height: 1em;
background-color: #007501;
text-align: right;
color: white;
}
footer p {
text-align: right;
color: white;
font: bold;
font: fantasy;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<div id="stredovyObal">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
</div>
</div> <footer></footer>
</div>
</body>
</html>
Here's the working example: http://codepen.io/anon/pen/mPRjBy
Styles... #col1 is 25% width, and #col2 is 75% width, together they make a total of 100% width of #container1
body {
background-color: #eeeeee;
}
header {
text-align: center;
height: 80px;
width: 100%;
background-color: #eeeeee;
}
#stredovyObal {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
#container1 {
float:left;
width: 100%;
background:white;
position:relative;
}
#col1, #col2 {
padding: 15px;
box-sizing: border-box;
}
#col1 {
text-align: center;
float:left;
width: 25%;
position:relative;
}
#col2 {
text-align: justify;
float:left;
width: 75%;
position: relative;
background:yellow;
}
footer {
float: left;
width: 100%;
height: 1em;
background-color: #007501;
text-align: right;
color: white;
}
footer p {
text-align: right;
color: white;
font: bold;
font: fantasy;
}
Then your html...
<header></header>
<div id="stredovyObal">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
</div>
<footer></footer>
</div>
https://jsfiddle.net/n2qgbr5z/2/
Related
I'm brand new to this. I'm trying to create my first webpage. I want three boxes placed inside my wrapper - it should look like this drawing: https://ibb.co/xGDCv2f
I basically want to place three boxes inside the wrapper. "Registrer Pant", "Nexus Fordele" and "Samlet Donation" I'm kinda clueless how to, though.
MY HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registrer Pant</title>
<link rel="stylesheet" type="text/css" href="Forside.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="header">
<h1>Godmorgen, Mathias</h1>
</div>
<div id="wrapper">
</div>
<br/>
<br/>
<br/>
<div id="box1" class="Pant">
Registrer Pant
</div>
<br/>
<br/>
<br/>
<div id="box2" class="Nexus">
Nexus fordele
</div>
<br/>
<br/>
<div id="box3" class="Samlet">
Samlet donation
</div>
</body>
</html>
MY CSS:
.header {
padding: 40px;
text-align: center;
background: #4968aa;
color: white;
}
.header h1 {
font-size: 40px;
}
#wrapper {
width: 1260px;
height: 500px;
border: 2px solid black;
}
.Pant {
background-color: #BCBCBA;
width: 800px;
height: 300px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 300px;
font-size: 100px;
#box2 {
background-color: lime;
width: 200px;
height: 100px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
#box3 {
background-color: dodgerblue;
width: 200px;
height: 100px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
Much appreciated.
If you want the boxes in the wrapper don't close the wrapper div (with </div>) until after the boxes' HTML.
Then just some minor adjustments in the CSS.
.header {
padding: 40px;
text-align: center;
background: #4968aa;
color: white;
}
.header h1 {
font-size: 40px;
}
#wrapper {
width: 1260px;
height: 500px;
border: 2px solid black;
text-align: center;
}
.Pant {
background-color: #BCBCBA;
width: 800px;
height: 300px;
text-align: center;
vertical-align: middle;
line-height: 300px;
font-size: 100px;
margin: auto;
}
#box2 {
background-color: lime;
width: 200px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
display: inline-block;
}
#box3 {
background-color: dodgerblue;
width: 200px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
display: inline-block;
}
<div class="header">
<h1>Godmorgen, Mathias</h1>
</div>
<div id="wrapper">
<div id="box1" class="Pant">
Registrer Pant
</div>
<div id="box2" class="Nexus">
Nexus fordele
</div>
<div id="box3" class="Samlet">
Samlet donation
</div>
</div>
<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%;
}
So this is what I'm trying to create. I have it in code, and it looks kinda of ok. But the div footers won't match.
Layout draft
My code:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 100%;
height: 100%
background: #FFF;
margin: 0 auto;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;
}
.header {
width: 100%;
height: 100px;
background: #ADB96E;
}
.sidebar1 {
width: 20%;
height: 1000px;
float: left;
background: #EADCAE;
padding-bottom: 10px;
}
.sidebar2 {
width: 10%;
height: 950px;
float: left;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
float:left;
padding: 10px 0;
width: 70%;
height: 950px;
float: left;
background: #CF3
}
.Hybrid {
float:left;
padding: 10px 0;
width: 10%;
height: 50px;
float: left;
background: #CCC49F
}
.menu {
float:left;
padding: 10px 0;
width: 70%;
height: 50px;
float: left;
background: #CCC49F
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="header">HEADER<!-- end .header --></div>
<div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
<div class="Hybrid">Hybrid</div>
<div class="menu">Menu</div>
<div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>
<div class="content">content</div>
<div class="footer">Footer<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Just don't seem to find the thing I did wrong. I think it's just something stupid I just don't see.
In my opinion your markup is wrong to get the layout from your picture.
Check this: https://jsfiddle.net/yotz6r4h/2/
html
<div class="header">header</div>
<div class="main">
<div class="sidebar1">
sidebar1
</div>
<div class="wrapper">
<div class="menu">
menu
</div>
<div class="sidebar2">
sidebar2
</div>
<div class="content">
content
</div>
</div>
</div>
<div class="footer">footer</div>
css
.header {
width: 100%;
height: 100px;
background: #ADB96E;
}
.main:after {
content: "";
display: table;
clear: both;
}
.sidebar1 {
width: 20%;
height: 1000px;
float: left;
background: #EADCAE;
padding-bottom: 10px;
}
.wrapper {
width: 80%;
float: left;
height: 1000px;
padding-bottom: 10px;
}
.menu {
padding: 10px 0;
height: 50px;
background: #CCC49F;
}
.sidebar2 {
width: 10%;
height: 930px;
float: left;
background: #aaa;
padding-bottom: 10px;
}
.content {
width: 90%;
float: left;
background: #CF3;
height: 940px;
}
.footer {
padding: 10px 0;
background: #CCC49F;
}
Nested Flexbox can do that.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
}
.wrapper {
height: 100%;
margin: auto;
display: flex;
flex-direction: column;
}
header,
footer {
height: 75px;
background: #c0ffee;
}
.inner-wrap-one {
flex: 1;
display: flex;
}
.sidebar-1 {
background: #663399;
color: white;
flex: 0 0 10%;
}
.inner-wrap-two {
flex: 1;
background: plum;
display: flex;
flex-direction: column;
}
nav {
height: 75px;
background: #bada55;
}
main {
display: flex;
flex: 1;
}
.sidebar-2 {
background: green;
flex: 0 0 10%;
color: white;
}
.content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: grey;
color: white;
}
<div class="wrapper">
<header>HEADER</header>
<div class="inner-wrap-one">
<aside class="sidebar-1">SIDEBAR 1</aside>
<div class="inner-wrap-two">
<nav>NAVIGATION</nav>
<main>
<aside class="sidebar-2">SIDEBAR 2</aside>
<div class="content">CONTENT</div>
</main>
</div>
</div>
<footer>FOOTER</footer>
</div>
Codepen Demo
i think your problem in floating, but you can try the following css code its work fine.
body{
margin: 0px
}
.header{
background: #fff222;
height: 100px;
}
.sidebar1 {
width: 20%;
background: #000;
color: #fff;
height: 550px;
display: inline-block;
float: left;
}
.Hybrid{
width: 20%;
float:left;
background: green;
display: inline-block;
height: 50px;
}
.menu {
background: #222fff;
color: #fff;
display: inline-block;
width: 60%;
height: 50px
}
.content{
background: #5efff0;
height:500px;
float:left;
width:60%
}
.sidebar2{
background: #ff22aa;
display:inline-block;
float:left;
width: 20%;
height:500px;
}
.footer{
width: 100%;
height: 100px;
background: #111fff;
float: left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="header">HEADER<!-- end .header --></div>
<div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
<div class="Hybrid">Hybrid</div>
<div class="menu">Menu</div>
<div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>
<div class="content">content</div>
<div class="footer">Footer<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Others have already give answers that fix your original problem. I just wanted to quickly show you how your markup could benefit from using HTML5. First, your DOCTYPE and head would look like this:
<!DOCTYPE html> <!-- isn't that easy to remember? -->
<html> <!-- no additional attribute required -->
<head>
<meta charset="UTF-8"> <!-- nice and simple -->
<title>SCHEEF</title>
</head>
<!-- ... -->
Second, you could replace some of those generic div containers with more semantic elements:
<!-- ... -->
<body>
<header>Header</header>
<aside id="sidebar1">Sidebar1</aside>
<main>
<nav>Menu</nav>
<aside id="sidebar2">Sidebar2</aside>
<div id="content">Content</div>
</main>
<footer>Footer</footer>
</body>
</html>
Depending on your contents, you could even replace the #content div with a section or article element (probably the first).
And that's pretty much all there is to it! You might want to give it a try.
I am trying to make the div tags in my HTML a percent of the size of the parent div, without being too small or too large. What I get when I check the size of the div with this code:
#main {
width: 800px;
height: 800px;
margin: 0 auto;
}
.sidebar {
width: 31%;
margin-right: 1%;
margin-left: 2%;
}
.content {
width: 61%;
margin-right: 2%;
margin-left: 1%;
}
.sidebar, .content {
background: #888;
height: 100%;
float: left;
border-radius: 4px;
color: #FFF;
font-family: Helvetica;
text-align: center;
}
.sidebar_inner, .content_inner {
height: 100%;
width: 100%;
padding: 0%;
font-size: 1em;
background-color: black;
}
<div id="main">
<div class="sidebar">
<div class="sidebar_inner">
<h1>Hello!</h1>
</div>
</div>
<div class="content">
<div class="content_inner">
<h1>Hello again!</h1>
</div>
</div>
</div>
The blue box is the inner div tag. Here is a better picture of the problem
You will need to have units on your width and height such as px, em, rem, %, vh, vw.
See more here at
W3.org
Solution from your example
The problem is h1 margin. Browsers have default style for line heights, margins and font sizes of headings, and so on. However, you can solve your problem by giving margin:0; to the h1 element or use css reset to solve your problem.
h1
{
margin:0;
padding:0;
}
#main {
width: 800px;
height: 800px;
margin: 0 auto;
}
.sidebar {
width: 31%;
margin-right: 1%;
margin-left: 2%;
}
.content {
width: 61%;
margin-right: 2%;
margin-left: 1%;
}
.sidebar, .content {
background: #888;
height: 100%;
float: left;
border-radius: 4px;
color: #FFF;
font-family: Helvetica;
text-align: center;
}
.sidebar_inner, .content_inner {
height: 100%;
width: 100%;
padding: 0%;
font-size: 1em;
background-color: black;
}
h1
{
margin:0;
padding:0;
}
<div id="main">
<div class="sidebar">
<div class="sidebar_inner">
<h1>Hello!</h1>
</div>
</div>
<div class="content">
<div class="content_inner">
<h1>Hello again!</h1>
</div>
</div>
</div>
All the properties of #main require a measurement unit...
#main {
width: 800px
height: 800px;
margin: 0px auto;
}
For you example, px is good.
It's happening because you have a top margin on your H1 tag.
I have a h1 and a p inside a div with display:flex.
The two are positioned side by side, but they have to be under each other.
It is about the elements with class jktitre and class jktxt inside (div)jkpage.
jkpage div is flex with jksidebar (side by side)
I did not expect that the text elements somehow inherit the flex property. Or something like that.
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
The CSS:
body{
background-color: lightgrey;
}
.jktitre{
margin-left:5%;
float:left;
display: block;
}
.jktxt{
margin-left:5%;
padding:10px;
float:left;
}
.jkrow{
width:100%;
display:flex;
}
.jkheader{
margin-top:20px;
height:150px;
width:100%;
background-color: #2d18a4;
}
.jknavbar{
height:45px;
width:100%;
background-color: black;
}
.jkpage{
height:400px;
width:75%;
background-color: #e7e7e7;
display:flex;
}
.jksidebar{
height:400px;
width:25%;
background-color: darkslategrey;
display:flex;
}
.jkfooter{
height:150px;
width:100%;
background-color: blue;
margin-bottom: 20px;
}
Add flex-direction: column to the parent element to display them under each other. The default value for it is row which shows the child elements from left to right(Side by side)
body {
background-color: lightgrey;
}
.jktitre {
margin-left: 5%;
float: left;
display: block;
}
.jktxt {
margin-left: 5%;
padding: 10px;
float: left;
}
.jkrow {
width: 100%;
display: flex;
}
.jkheader {
margin-top: 20px;
height: 150px;
width: 100%;
background-color: #2d18a4;
}
.jknavbar {
height: 45px;
width: 100%;
background-color: black;
}
.jkpage {
height: 400px;
width: 75%;
background-color: #e7e7e7;
display: flex;
flex-direction: column;
}
.jksidebar {
height: 400px;
width: 25%;
background-color: darkslategrey;
display: flex;
}
.jkfooter {
height: 150px;
width: 100%;
background-color: blue;
margin-bottom: 20px;
}
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>