I wrote this css example, it works fine if the content is not much in number
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
html{
height:100%;
margin:0px;
}
body{
height:100%;
margin:0px;
}
div{
height:100%;
margin:0px;
background-color:red;
width:100%;
}
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
But my example fails as soon as you add more content
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
How do I write some css to wrap the content when the content is in a greater number?
When you make your html's height 100%, it will scale the body tag to the 100%, limiting the div's height ultimately, to work around this problem, you have two approaches.
Approach 1
Apply height 100% only to the body tag
body {
height: 100%;
overflow: auto;
margin: 0px;
}
div {
height: 100%;
background-color: red;
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
Approach 2
Add overflow:auto to your div to make it's overflow automatic and based on the content, like
body,html {
height: 100%;
overflow: auto;
margin: 0px;
}
div {
height: 100%;
overflow:auto;
background-color: red;
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
Fixed widths and fixed heights don't work for modern responsive layouts. If you provide us with more specific information on the widths of the columns in percentages of the viewport width, I will update this answer with a tried-and-true approach to equal height columns.
Related
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I have a case where when specifying a fluid margin-top like for instance 20% and when
I resize my browser window horizontally, the margin-top increases. This is a bit unexpected for me. I am looking for a quick fix for this ..
<html>
<head>
<title>Make yourself lucky</title>
<meta name="description" content="Make yourself lucky" />
<style type="text/css">
#slideshow {
float: left;
background-color: red;
width: 100px;
height: 100px;
margin-top: 20%;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='slideshow'>
slideshow
</div>
</div>
</body>
</html>
http://jsfiddle.net/eVfCc/
Try adding position:absolute to the same CSS.
I am trying to center a div. This is my code:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
* {
text-align: left;
}
</style>
</head>
<body>
<div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
<div id="content" style="text-align: center;">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</div>
</body>
</html>
It isn't completely center, because I set in the CSS reset that text-align is left. If I remove this line everything is fine. Why is text-align: center; of the div with the id #content not overriding the CSS reset?
You need !important to overwrite that (leaving the p tag)
#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}
DEMO 1
Or else you can write css for p tag
#content p{text-align: center }
DEMO 2
Try this
Key point is
margin: 0 auto
Even better, less markup:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
#content{
width: 500px;
margin:0 auto;
}
#content p {
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</body>
</html>
In most cases it's better to prevent useing ìnline-styles`. Also move your styles in an seperate css file for a better maintainability.
In HTML * tag means its consider all tags strictly the property as you mention in between, you need to little change your style please visit link
The point is to have this video to always be 100% of the viewport width;
But to have the height just to a point where no scroll is needed.
Can this be achieved without using overflow:hidden; ?
You can copy paste the following as is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello User!</title>
<style type="text/css">
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
</style>
</head>
<body>
<div>
<div>
Im the navigation!! Wupii
</div>
<div>
<p>I'm more text, more things</p>
<p>I'm more text, more things</p>
</div>
<div id="video-border">
<video controls="controls">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
alt text
</video>
</div>
<div id="footer"><p>I'm the footer hello</p><p>I'm the footer yeah again</p></div>
</body>
</html>
To be honest, I'm not even sure if this solution will properly work. Not sure if the video will behave on those circumstances, still... wondering.
Please advice.
Agree with Patrick.
If you instead want to use it in a fixed, pre-calculated height box, use this:
div#video-border {
background-color: black;
border: 2px solid red;
}
video {
max-width: 100%;
width: 100%;
height: auto;
max-height: 150px; /* your desired height */
}
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.