Hiw can I split my page into one top (50% height, width=100%) and two bottom columns(50% height, 50% width).
I tried but no success...
<html>
<head>
<title>CSS devide window into three (horizontal, 2 vertical )</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
.wrapM {
width: 100%;
height: 100%x;
padding:2px;
}
.wrapT {
width: 100%;
height: 50%;
padding:2px;
}
.wrapB {
width: 100%;
height: 50%;
padding:2px;
}
.wrapl {
width: 50%;
height: 100%;
padding:2px;
}
.wrapr {
width: 50%;
height: 100%;
padding:2px;
}
</style>
</head>
<body>
<div class="wrapM">
<div class="wrapT">Hello World This is upper Content</div>
</div>
<div class="wrapB">
<div class="wrapl">Hello World This is bottom LEFT Content</div>
<div class="wrapr">Hello World This is bottom right Content</div>
</div>
</body>
</html>
To get .wrapB1 and .wrapB2 side by side, they should float: left. But this is not sufficient, because of the padding. Add box-sizing: border-box to have this fixed.
To get a height of 50%, html and body should be set to 100% height. Additionally, you have a syntax error in your height specification of .wrap.
Have a look at https://jsfiddle.net/sgtb00nt/ to see a working version. I have also fixed the wrong nesting of <div>s.
Related
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward.
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward.
What is wrong? I need my div to be exactly 500px.
Thanks :)
From what I understand, you want to make the second div go down after resizing the browser. So you can use media queries for that:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
#media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
I separated the style of the two divs, and removed the float:left from the inline style. The <meta> is also important for the media query to work. I used clear:both to clear the float of the first div from the second, thus not affecting the second div.
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer
You have to set float in second div also. Or in media query you have to set the display: block in both div. check updated snippet below..
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div style="float: right">
bbb
</div>
</div>
</body>
</html>
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I'm (hopefully) trying to horizontally align the text in two div boxes , but as you can see below it isn't happening for me . Please help as I can't see what I'm doing wrong
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.left-div {
vertical-align:top;
float: left;
width: 400px;
height: 250px;
}
.right-div {
vertical-align:top;
margin-left: 400px;
}
</style>
</head>
<body>
<div class="left-div">
<H2> Telephone:</H2>
<strong>Mobile: </strong> 123456789<br />
<strong>Office: </strong> 123456789(answer service)<br />
<strong> Email: </strong>pgbathrooms#hotmail.co.uk
</div>
<div class="right-div">
<H2>Address:</H2>
house<br />
town<br />
county<br />
</div>
</body>
</html>
Here's a working Fiddle
The problem you were having was actually the margin-collapse problem, which was manifesting because your h2 has margin-top, and it was being reflected in one div and not the other.
Vertical-align does not work on block-level elements, only inline-block or inline elements.
You could do one of two things:
Remove the margin-top from your h2: div h2 {margin-top: 0;}
You could add padding to the top of the divs to give the margin something to "push off of"
Changing your css as follows takes care of the problem:
.left-div {
float: left;
width: 400px;
height: 250px;
padding-top: 1px;
}
.right-div {
margin-left: 400px;
padding-top: 1px;
}
I have the following HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>
The problem is that the div.center stretches to fit its content, while the div.table is meant to occupy the whole viewport, and the rest of the div.center's content should be invisible. Neither overflow:hidden nor explicit width setting in pixels (900px, for instance) helps.
I would be very grateful for any idea on how to fix the issue.
Use table-layout:fixed on the table div. This disables the automatic cell resizing and will make the center only as wide as you allow it to be.
as I've understood, for a div to actually be 100% in height, the parent div needs to be set right?
So, imagine a div structure that looks like this:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
This is supposed to essentially be a sticky footer layout based on Ryan Faiths sticky footer layout.
How can in this case the gallery have 100% height as well as the wrapper? I can't figure this out.
My CSS looks like this: Exactly the same as Ryan's CSS, only with the gallery class added.
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
(Deleted all the old stuff)
Here is the new HTML with gallery 100%, hope it works :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:
Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.
My 2cents...