This is a normal div
<div>First div</div>
I do this in order to change the height.
<div height="150">
First div
</div>
But nothing happens. I don't see the div taking more than it's usual height.
What might me going on that I'm not seeing?
This is the complete code:
<html>
<head>
<title>Probando</title>
</head>
<body>
<div height="150">
First div
</div>
<div>
Second Div
</div>
</html>
Instead of using height attribute, which is deprecated on most HTML elements, you can simply use inline CSS, like in this demo:
<html>
<head>
<title>Probando</title>
</head>
<body>
<div style="height: 150px">
First div
</div>
<div>
Second Div
</div>
</html>
You should use inline CSS for this purpose.
<div style="height: 150px">
First div
</div>
You should try CSS, HTML element's height and width apply on the table only.
<html>
<head>
<title>Probando</title>
</head>
<body>
<div style="background:#CCC;height:150px">
First div
</div>
<div>
Second Div
</div>
</html>
Pure html - use <br> as many times as div height is enough (no per-pixel precision)
<div>
First div<br><br><br><br><br><br><br><br>
</div>
<div>
Second Div
</div>
Related
I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
I can't figure out why but 2 extra pixels are added to the height of a span element. Here is an example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="font-size:20px;line-height: 20px">
test
</span>
</body>
</html>
In chrome debugger tools the span has a height of 22 pixels. If I change the test element to a div the extra pixels go away.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="font-size:20px;line-height: 20px">
test
</div>
</body>
</html>
here is a fiddle with the span and the div elements
JSFiddle
It happened, because span is an inline element and it's height is set to auto. Set display property to inline-block, for example, and span will take exactly the height you want it to take.
<div style="font-size:20px;line-height: 20px">
test
</div>
<span style="display:inline-block;font-size:20px;line-height: 20px">
test
</span>
I'm studying code that I found on the net and faced problem. When I add text to the main div called content, I get no margins, text is too close to sidebar. How should I fix it? Here's the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="outer">
<div id="header"></div>
<div id="inner">
<div id="sidebar"></div>
<div id="content">
</div>
</div>
</html>
CSS
#outer {width:1000px;margin:0 auto;}
#inner {overflow:hidden;}
#header {min-height:40px;background:#bbb}
#content {width:900;min-height:900px;float:left;background:#ccc;clear:}
#sidebar{width:100px;min-height:250px;float:left;background:#ddd}
Use padding and/or margins on your content and/or sidebar div in the CSS
http://www.htmldog.com/guides/cssbeginner/margins/
Have you tried something such as
#content{box-sizing:border-box, width:900;min-height:900px;float:left;background:#ccc; padding:10px;}
Using "box-sizing" should ensure it doesn't mess up your page.
edit: and yeah, close that html, that could really help.
Don't know what you need exactly. But try to add padding-left or margin-left
#content {width:900;min-height:900px;float:left;background:#ccc;padding-left:20px;margin-left:10px;}
Inside the content div add another div and use margins on it.
You can also use a paragraph tag and same use margins on it, this will not break your layout.
Also you are missing a closing tag, this definatly needs to be fixed.
Try:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="outer">
<div id="header"></div>
<div id="inner">
<div id="sidebar"></div>
<div id="content">
<div class="box">
all text and content comes here
</div>
</div>
</div>
</div>
</html>
Additional CSS:
.box {
margin:50px;
}
I am looking to increase the size of the header of a jquery mobile app. When I do that I need the title to be centred. I found that I can add a line like:
line-height: 30px;
to the css, but that is just far to much of a hack. I assume there must be a better way to do it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css"><!--
.ui-header {
height: 50px;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This Needs To Be Centred Vertically</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The easiest way to vertically center text of a block element is by making the line-height the same as the height of said element. Note that this will only work if you have a single line of text.
line-height: 30px;
height: 30px;
On an inline or table-cell element, you could use vertical-align: middle to achieve the same effect.
Also note that forcing display: table-cell on an element will not work in IE6-7.
In your case, I would suggest going with the line-height/height technique.
You may try with
display: table-cell;
vertical-align: middle;
in your CSS.
You could try something like this:
<div data-role="header">
<div class="ui-bar">
<h1>This Needs To Be Centred Vertically</h1>
</div>
</div>
Doc: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Is it possible to use a fixed width div and an expanding div? Something like:
<div style="float:left; width:200px">
</div>
<div style="float:left; width:100%"> // expand please
</div>
<div style="position:fixed; width:320px">
</div>
I'd like the middle div to just expand in width and take up whatever is left after position the left and right div. It works fine if I give each of them a width in %, but when using a fixed-width for some, they start overlapping when the browser frame gets small etc,
Thanks
How about:
<html>
<body>
<div style="float:left;width:200px;background:red">
</div>
<div style="float:right; width:320px;background:blue">
</div>
<div style="background:black">
</div>
</body>
</html>
<div style="left:0;width:30px;"></div>
<div style="left:30px;right:0;"></div>
You may need to make them absolute positioned and the parent relative.