How can I center one div inside another div?
Thank you!
You have some fundamenatal syntactic issues to face here:
You should stop using div to encase image tags and instead use the figure tag in HTML5.
You should (as commented by Hevlastka) remove the size defined in the <img> tag and have the sizing only defined in CSS.
You have set a max-width without setting a width which can cause issues on IE based browsers.
IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
IE7 doesn't support min-width on input button/submit button/reset button.
max-width doesn't work with images in table cells in IE.
Using Normalize CSS is highly recommended (esp. if you don't want to use javascript).
You should try and get out of the habit of using <style> as soon as possible and instead put your CSS in its own specific file to be called by the HTML file.
Edits to your code that I've used to make it work for me on IE 11 and Edge:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title is REQUIRED in HTML head area</title>
<style>
div {
text-align:center;
}
/*
The picture and the div must be Centered
inside their container!
*/
figure {
border: 1px solid red;
padding:20px;
text-align:center;
display:inline-block;
margin:auto;
}
img {
border: 1px solid black;
width: 100%;
max-width:640px;
height: auto;
margin:auto;
}
</style>
</head>
<body>
<div>
<figure>
<img src="https://image.ibb.co/bE3eVF/my_Picture.jpg">
</figure>
</div>
</body>
</html>
Adding Modernnizr.js is solving the problem.
Add this between your <head> tags.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
and remove display: table; from your CSS.
Related
I encountered this bug (see bug/expected image) while trying to use css transformation with float arguments for a div element with a border. It looks like a "border around a border", this extra border has the same color as an element background. The bug obviously related to how browsers works with float values, because when I use just transform: translate(10px, 10px), everything is ok. One interesting thing, some float arguments works ok, but other does not.
I tried different advices from various resources related for example to blurry border or bugs with floating values, But unfortunately, nothing works. Here is a list of things I tried:
add will-change: transform to element
backface-visibility: hidden
-webkit-filter: blur(0px)
-webkit-font-smoothing: antialised
use only odd/even numbers for translate
Possible workarounds:
Add border-radius: 1px (it was unexpected)
Remove border + wrap in another bigger div + center it
Code to reproduce (try different float arguments in transform):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
.item {
transform: scale(1.07);
background-color: red;
border: 10px solid white;
width: 50px;
height: 50px;
}
</style>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
Link to codesandbox
This seems to be a rendering bug in the browser. The best solution (assuming there are no other constraints to this problem) would be to add background-clip: content-box; in the .item CSS block.
This clips the background of the element to the element's content box, instead of its border box, which in practice means that the background is not rendered under the border of the element, thus most likely it won't bleed over the border with sub-pixel rendering.
I have the following sample code:
div {
display: inline-block;
padding: 5px;
background: #f00;
}
textarea {
display: block;
}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
<p>hellohellohellohellohellohellohellohello</p>
<textarea></textarea>
</div>
It shows a red region (<div>) containing the paragraph "hellohellohello..." (<p>) and a resizable textarea (<textarea>).
Behavior in Firefox (version 72): When I resize the textarea, inline CSS properties width and height are added to the textarea element. When necessary, the containing <div> will be resized to neatly contain both the paragraph and the textarea.
Behavior in Chrome (version 80): When resizing the textarea, an additional inline CSS property margin is added to the textarea as well, causing the containing <div> to be resized together with the textarea, keeping the initial margins fixed.
Does anybody know why these behaviors are different between Chrome and Firefox?
In my current application, I prefer the Firefox behavior. How can I make Chrome to use the same behavior as Firefox? (Preferably without using JavaScript...)
Edit:
I noticed that the behavior is correct when I remove the display: block; CSS declaration from the textarea element.
So the actual questions here are:
why the textarea element's margins become "fixed" in Chrome when using display: block; in its CSS styling, and
how to avoid this behavior in Chrome while keeping display: block; in the CSS styling.
This is an interesting behavior in Mozilla. This need to be share to relative Mozilla community. For temporary solution you can override inline "margin" property by using !important property in CSS. Try below code :
div {
display: inline-block;
padding: 5px;
background: #f00;
}
textarea {
display: block;
margin:0 !important;
}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
<p>hellohellohellohellohellohellohellohello</p>
<textarea></textarea>
</div>
;
}
I am attempting to control the thickness of an underline, however, it seems its just one huge horizontal line that does not conform to the text. How can I get the text to underline as the same thickness of the text:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
The 'border-bottom' style is being added to the 'div' tag. Because by defult 'divs' are set to 'display: block;' the width of the div is 100%. To solve this, add another tag surrounding the text and give the class to that tag.
For Example: <div><span class="title">test</span></div>
New Code:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div><span class="title">test</span></div>
</body>
</html>
you just have to insert display:inline-block; in your css or float the element;
The problem you have is that you're using a border, not an underline. The border extends the full length of the element, which for a div is width: 100% by default.
To change that you should limit the width of the div explicitly, or by using float or changing its display.
Using width:
div {
width: 10em; /* or whatever... */
}
JS Fiddle demo.
Using float:
div {
float: left; /* or 'right' */
}
JS Fiddle demo.
Using display:
div {
display: inline-block; /* or 'inline' */
}
JS Fiddle demo.
Of course, given that you effectively want the underline to be below the text and, presumably, serve to 'underline' the text (see the problem with the demo, using a defined width if the text is longer than the defined width), it'd be easier to simply use an in-line element, such as a span for this, rather than a div, since its default behaviour is the same behaviour that you want.
Change your div to a span.
span is good for short pieces of text on a single line.
See here:
Example
If you use em instead of px, the border adopts the font size.
span {
font-size:5em;
border: solid black;
border-width:0 0 0.1em;
}
Here is a fiddle: Fiddle.
Seems like for IE7 there is only method to make this work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
border-bottom: 3px solid red;
display: inline;
}
</style>
</head>
<body>
<div><h1>Hello, world</h1></div>
</body>
</html>
try adding: margin: auto.
This should scale the line according the length of the text
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Declare CSS style outside the “HEAD” element of an “HTML” page ?
I am creating some content that is being used inside a CMS where I do not have access to the header tag. Is there a way to add CSS rules within the <BODY> of the document?
I want to do this ...
.ClassName
{
border: 2px solid red;
margin: 5px;
padding: 5px;
}
I could add the style rules "inline" inside the element but I wanted to avoid this if possible since the CSS rules will be used in many elements.
I want to avoid this ...
<div style="border: 2px solid red; margin: 5px; padding: 5px">content</div>
You can add <style> inside body, but you'll get a validation error:
Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
(This is because it's not allowed according to the specs, see #Oded's answer)
It works just fine in browsers though. Browsers do not care:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
.ClassName
{
border: 2px solid red;
margin: 5px;
padding: 5px;
}
</style>
<div class="ClassName">content</div>
</body>
</html>
Yes. You can use a <style> element.
<style type="text/css" scoped>
.redOutline {
border: 2px solid red;
margin: 5px;
padding: 5px;
}
</style>
<div class="redOutline">content</div>
Answered before :)
But in short, they are invalid but many sites add them to the body, especially those built by (bad) Content Management Systems.
This is not valid HTML, according to the spec.
In the DTD, the STYLE element appears like this:
<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->
Where the head.misc only appears as pard of HEAD or TITLE.
However, as others have noted, many browsers will still parse and use stylesheets that have been defined within the body tags. Your mileage may vary... in particular if you do use a DOCTYPE in your markup.