I have a web page like this.
<html>
<head></head>
<body>
<div style="background:blue">
<h3 style="background:green">Hello world.</h3>
</div>
</body>
</html>
When I analyze the output in chrome, it seems that the h3 tag is taking more space than the div tag. I want the div tag to completely include the h3 tag, and the background color of div to be shown in the entire area. Any idea how to do this?
The reason this is happening is that some elements have browser styling by default, that is why you should always use a css reset:
if you float the div it will wrap around the element, and set the margin of the h3 to 0.
<div style="background:blue;float:left;">
<h3 style="background:green;margin:0;">Hello world.</h3>
</div>
fiddle
For the div to take the entire screen's size remove the float.
<div style="background:blue;">
<h3 style="background:green;margin:0;">Hello world.</h3>
</div>
Like this
DEMO
CSS
.div1{
background-color:blue;
float:left;
}
h3{
margin:0;
padding:0;
background:green;
}
DEMO1
Set a font-size and line-height on the h3 like so:
h3 {
font-size: 16px;
line-height: 1em; }
Taken a css reset? This set all to default values.
http://meyerweb.com/eric/tools/css/reset/
Most simple solution I see, add overflow: hidden; to the enclosing div.
<h3 style="background:green;margin:0;">Hello world.</h3>
By default h3 has a margin associated with it. So you have to add a margin:0 to the h3 tag.
DEMO
set margin of h3 to 0.This will solve the problem.
I solved this issue by increasing the line height of h3.
Related
I have created this JSfiddle for my question.
In this particular fiddle when we resize the window the div elements change themselves accordingly as they should. But i want that not to happen. Using {white-space: nowrap;} don't seems to be a good option. little help will be appreciated. thank you.
<body>
<p>This is a paragraph with no specified margins. i am writing stuffs to just make things long so as to provide a better understanding of my question.</p>
<p class="margin">This is a paragraph with specified margins. i am writing stuffs to just make things long so as to provide a better understanding of my question. Press the "restore down" button present before "close button" or resize the window. It will change it shape according to CSS. I want that not happen. it should appear as it is while restoring or resizing.</p>
<p align="center"> In short i want a responsive "div" elements. </p>
</body>
I need the div elements to be fixed, they should not change themselves while resizing. Thank you.
Set body width fix to solve this problem,
body{
margin-left: auto;
margin-right: auto;
width:400px;
}
Check this demo jsFiddle
Not sure if I am understanding properly, but one idea would be to nest a fixed width div (done with width = 200px here, change as necessary) which holds your text inside of the main div / window:
<div id="Resizable">
<div id="TextHolder" style="width:200px">
<p>Your text</p>
</div>
</div>
In your case, you need to set fixed width to your p elements.
p{
width: 600px;
margin-left:auto;
margin-right:auto;
}
or you just set the body width to be fixed. eg.
body{
width: 600px;
margin-left:auto;
margin-right:auto;
}
can use min-width or max-width
body{
margin-left: auto;
margin-right: auto;
min-width:400px;
max-width:500px;
}
Fiddle
You can set body width as user1153551 said in previous answer or you can set the width or your p element...
p
{
background-color:yellow;
width:400px;
}
Here is FIDDLE
I'm making a website with the title in a div box at the top of the page. The issue is that when i put a heading in the box it doesn't stay in the box
<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
When you create a HTML file, each browser interpret the elements on its way. For example: some browsers have an extra margin config at an <p> or some different line-height property. Because of that, normally, the developers use a Reset CSS (example: http://meyerweb.com/eric/tools/css/reset/). It reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
In your case, h1 by default have some configs that make it go out of the div box (margin and padding, as I checked). You can solve it using: margin: 0; padding: 0; at <h1> element. My suggestion for future projects: use a Reset CSS and you'll have more control in things like that.
Another suggestion: use a CSS file to organize your own styles. Inline styling isn't a good thing when you've a common thing to modify and have to go file by file to do that. With CSS you only change the file and it reflects at all HTML that uses it.
Well, my CSS fix suggestion is:
HTML:
<div>
<h1>Welcome to a Website </h1>
</div>
CSS:
div {
/* Make title go to entire screen*/
width: 100%;
display: block;
/* You visual config */
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin: 0;
padding: 0;
text-align:center;
}
I used width:100%;display:block instead of width:1000px because I assumed that you want a block that occupies 100% width from screen. Working demo: http://jsfiddle.net/brunoluiz/NyLAD/
Well, good luck with HTML and CSS studies!
You can set the margin of your h1 to 0, also note that you should place the styles in some CSS file or right inside the page (between the <style> tags):
div {
width:1000px;
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin:0;
}
Working demo.
Because you specified a specific height for the box in the style. Try removing the "height:40px;" part.
Now the div style looks like this:
style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"
Fiddle
It looks like the height of the size of the header is too big for the height you set on your div. Try taking out the height from the div's style, like so:
<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
I want to position a paragraph to the right of an <iframe> of a Google map.
I do not know how to show my code, so here is a screenshot of what I want:
Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):
css
.google_map{
width:55%;
margin-right:2%;
float: left;
}
.google_map iframe{
width:100%;
}
.paragraph {
width:42%;
float: left;
}
.clearfix{
clear:both
}
html
<div class="google_map">
<iframe></iframe>
</div>
<div class="paragraph">
<p></p>
</div>
<div class="clearfix"></div>
You have two options, either float:left or display:inline-block.
Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.
Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.
You can simply use a div to make a container and display: flex; to make the content appear side-by-side like this:
.splitscreen {
display: flex;
}
.splitscreen .left,
.splitscreen .right {
flex: 1;
}
<div class="splitscreen">
<div class="left">
Content
</div>
<div class="right">
Content
</div>
</div>
None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:
position: absolute;
width: 50px;
And apply this style to the right element:
margin-left: 50px;
Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:
display: inline-block;
Applying this style may not be necessary depending on surrounding elements
Fiddle:
http://jsfiddle.net/2b0bqqse/
You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left
Fiddle:
http://jsfiddle.net/qrx78u20/
For your iframe give an outer div with style display:inline-block, And for your paragraph div also give display:inline-block
HTML
<div class="side">
<iframe></iframe>
</div>
<div class="side">
<p></p>
</div>
CSS
.side {
display:inline-block;
}
Use either float or inline elements:
Example JSBIN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>float example</div>
<div><div style="float:left">Floating left content</div><div>Some content</div></div>
<div>inline block example</div>
<div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
Like this
.block {
display: inline-block;
vertical-align:top;
}
JSFiddle Demo
You can use float:left to align div in one line.
Fiddle
You can float the elements (the map wrapper, and the paragraph),
or use inline-block on both of them.
Wrap the iframe in a class, float that left.
The paragraph with then be forced up and to the right as long as there is room for it.
Then set your paragraph to display:inline-block, and add some left margin to tidy it up.
<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>
.left { float: left; }
p { display: inline-block; margin-left: 30px; }
Here's a fiddle: http://jsfiddle.net/4DACH/
Put the iframe inside the <p> and make the iframe CSS
float:left;
display:inline-block;
give your boxes the class foo (or whatever) and add the css
.foo{
float: left;
}
This seems like it should be a very simple issue to me, although I just can't figure it out on my own. I have a h2 element that I want to keep at 85%, and it contains a short line of text. I want it to be centered in its containing div, not just for the text to be centered in the h2 element.
Here's some code:
<div class="main">
<div class="secondary">
<h2>Three words of text</h2>
</div>
</div>
CSS:
div.main{
text-align:center
}
div.secondary{
text-align:center
}
h2{
text-align:center
width:85%
}
I made a Fiddle, too
Thanks to anyone who can help.
First of all, you are missing the semicolons in your properties. That makes css parsers skip parsing the rest of the properties.
On the other hand, there are several ways to do this, but as you have already a fixed width, try this:
h2 {
text-align:center;
width:85%;
margin: 0 auto;
}
Add:
margin: 0 auto;
To the h2 style rule.
http://jsfiddle.net/wF57b/1/
The text-align property centers the text inside the container (in this case, h2).
You don't want to align the text itself, but the h2 container. So, instead of using text-align: center;, you should use margin: auto. Here's your updated jsFiddle.
I just want to have my anchor in the middle of the screen horizontally, how might I do this?
example
Add the text-align CSS property to its parent style attribute
Eg:
<div style="text-align:center">
example
</div>
Or using a class (recommended)
<div class="my-class">
example
</div>
.my-class {
text-align: center;
}
See below working example:
.my-class {
text-align: center;
background:green;
width:400px;
padding:15px;
}
.my-class a{text-decoration:none; color:#fff;}
<!--EXAMPLE-ONE-->
<div style="text-align:center; border:solid 1px #000; padding:15px;">
example
</div>
<!--EXAMPLE-TWO-->
<div class="my-class">
example
</div>
Q: Why doesn't the text-align style get applied to the a element instead of the div?
A: The text-align style describes how inline content is aligned within a block element. In this case, the div is a block element and it's inline content is the a. To further explore this consider how little sense it would make to apply the text-align style to the a element when it is accompanied by more text
<div>
Plain text is inline content.
example
<span>Spans are also inline content</span>
</div>
Even though there are line breaks here all the contents of div are inline content and therefore will produce something like:
Plain text is inline content. example Spans are also inline content
It doesn't make much sense as to how "example" in this case would be displayed if the text-align property were to be applied.
write like this:
<div class="parent">
example
</div>
CSS
.parent{
text-align:center
}
Two options, that have different uses:
HTML:
<a class="example" href="http://www.example.com">example</a>
CSS:
.example { text-align: center; }
Or:
.example { display:block; width:100px; margin:0 auto;}
Try:
margin: 0 auto;
display: table
try to wrap a div around and add these styles to the div:
width: 100%;
text-align: center;
<span style="text-align:center; display:block;">
Awaissoft
</span>
By default an anchor is rendered inline, so set text-align: center; on its nearest ancestor that renders as a block.
I think you can't do that with inline elements like anchor, span. But to make it work you have to set the display to block.
example
There are many ways.
<!-- Probably the most common: -->
<div style="text-align: center;">Link</div>
<!-- Getting crafty... -->
Link</div>
There are probably other ways too, but these three are probably the most common.
You can try this code:
/**code starts here**/
a.class_name { display : block;text-align : center; }
style="margin:0 auto; width:auto;" Try that.
css cannot be directly applied for the alignment of the anchor tag.
The css (text-align:center;) should be applied to the parent div/element for the alignment effect to take place on the anchor tag.
It is very Simple Anchor(a) is a inline element, it means width of inline element is equal to how much text width is there that much.so if you want horizontal center so you need to convert inline to block element, then add text align center.
<a style="display:block;text-align:center" href="http://www.example.com">example</a>
Just put it between center tags:
<center>><Your text here>></center>