This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I am trying to draw some rich text in a border; here is an excerpt:
<!DOCTYPE html>
<html>
<body>
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;width:100%;height:100%;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
</body>
</html>
This seems to draw outside right border:
... while I would like to get something like:
Note: second image has been rendered using width:90%; which, of course, is not correct because right margin/padding is dependent on window size, while it should be a fixed number of pixels from right.
What is the "Right Way" to get result I need?
Simply get completely rid of the width and height settings for your outer container <div>. This will make the border's size depending on the size of the content inside.
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
Related
I am working on a puzzle given in below link
Semantics
It has 3 questions:
Update the website's HTML to make use of semantic elements so that:
The classless outer div element is replaced with a more appropriate element.
The divs with the image and caption classes are replaced with self-contained content elements.
The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.
I tried adding class to outer div as <div class="header"> and <div class="container">. Adding a Div section to contain the image and caption and also other ways to solve the puzzle, but none of them are working, the test cases are not successful.
Can you please tell me what is the right approach for this puzzle.
Take a look at:
https://www.w3schools.com/html/html5_new_elements.asp
for example:
use <main> instant of the <div> over all elements
use <figure> instant of the <div> for the image
use <figcaption> instant of the <div> for the image caption
....
I used following semantic elements and it worked.
use <main> instead of <div> over all elements
use <figure> instead of <div> for the image
use <figcaption> instead of <div> for the image caption
use <details> instead of <div> for lorem-ipsum class
use <summary> instead of <div> for description class
The correct response is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Semantics</title>
</head>
<body>
<section>
<h1>Lorem Ipsum</h1>
<figure class="image">
<img src="https://www.testdome.com/files/resources/12362/5d766d82-359a-42e3-b8e7-36fc20fa8395.png" alt="Lorem Ipsum">
<figcaption class="caption">Lorem Ipsum</figcaption >
</figure >
<details class="lorem-ipsum">
<summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris lacinia scelerisque nibh nec gravida.
Duis malesuada nec nibh sit amet pulvinar.
Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel.
Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros.
Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus.
Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum.
Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
</details>
</section>
</body>
</html>
While Madhukar's answer correctly provided the elements that TestDome is looking for to achieve a 100% score, it should be noted that the action of 'details' and 'summary' (toggling visibility of the 'p' element) does not work cross-browser (https://caniuse.com/#search=details) without the use of polyfils. These tests should be treated with caution - as the old saying goes 'there is more than one way to skin a cat'.
This question already has answers here:
Chrome on Android resizes font
(7 answers)
Closed 6 years ago.
I found a strange Chrome “feature” I don't understand. When using fieldset with responsive design, the text within the fieldset would sometimes appear much bigger compared to the other contents of the page.
When I remove a few characters from the text, it suddenly takes the same size as any other block on the page.
For instance, the following page is generated by Chromium 49 using Device mode. The display is very similar on an Android smartphone running Chrome. Firefox in responsive design mode doesn't have the glitch.
This is the corresponding code. There are no external CSS files.
<html>
<head>
<style>
body{font-size:.8em;}
</style>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta sus
cipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen
tum orci, id vulputate nisl mauris non mas.
</p>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non mas.
</p>
</fieldset>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non ma.
</p>
</fieldset>
</div>
</body>
</html>
In this piece of code, the first <p> of the page and the one inside the first <fieldset> contain the same text. The paragraph in the second <fieldset> contains one character less.
What is happening?
Note that an ugly workaround consists of specifying fieldset{font-size:.999em;} in the styles. It makes all three paragraphs appear similar. This being said, I'm more interested about the origin of this feature/glitch rather than a workaround/hack.
I discovered that this behavior is by design.
In order to prevent Chrome on Android or Chromium in Device mode to adjust the font size depending on the content of a block, the following meta element should be added:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: Joe DeRose's answer to a similar question.
Further reading: Using the viewport meta tag to control layout on mobile browsers at MDN.
I'm building a website, and have floated an image to the right of a div with some text to the left, which I have done many times before. However for some reason, the image is not floating completely over to the right in FF, but is in Chrome and IE/Edge. It's probably something really obvious, but any insight?
Firefox
Chrome/IE
HTML
<div class="wrapper">
<img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
<h1>Hammer Curl</h1>
<h2>Arms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
<div style="clear:both"></div>
</div>
CSS
.wrapper {
margin: 0px auto;
width: 1000px;
padding: 20px 0px;
}
You should group your text and title elements together, and provide them a width.
From the snippet you supplied, it looks like both screenshots are actually obeying the rules you've supplied - both are floating the image to the right of your text.
However, there's no specification of how far over it should be -- just how far from the text (40px padding-left) and how large the ENTIRE item should be ("wrapper" # 1000px);
Try this:
<div class="wrapper">
<img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
<div class="content">
<h1>Hammer Curl</h1>
<h2>Arms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
</div>
<div style="clear:both"></div>
</div>
CSS
.content {
width: 700px // or whatever you want to set it to
}
By wrapping the non-image elements together, and specifying a width for them specifically, you should be able to keep the experience the same across most browsers.
EDIT: Fixed some formatting.
This question is kind of hard to explain with words, so I will link to a jsFiddle. jsFiddle. If you look at any of the links, you will see some boxes that are at different levels. These are supposed to tile across the screen, kind of like what you can see here. How can I stop them from having the weird vertical spacing above the elements and get them to tile properly? I think that it is caused by each elements contents having different heights, but I don't know how to fix it. Here is the code that you can find in the jsFiddle:
HTML:
<div id="elements">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
CSS:
#elements div {
display:inline-block;
width:250px;
height:250px;
border:solid thin #000;
}
Add vertical-align: top; to the CSS rule.
There are lot of techniques to fix this. Either float these elements like-
#elements div {
display:inline-block;
width:250px;
height:250px;
border:solid thin #000;
float:left;
}
or vertical-align: top; buyt as i think in case of inline-block elements flaot one is more robust that'll not last at any breakpoint and also where you haven't applied resets to the body.
I want to display a html page, with a classic design. Header, footer, content and bar to the right.
For some reason I don't like the fixed width of the content. On a wide screen you should be able to resize your page, so it fills the screen, or make it very small to display two pages side by side.
I also would like to use div tags instead of a table layout. Using the div tags gives me the following advantages (I'm being told):
Content can be rendered while waiting for the "right" bar
On a mobile phone, the Div tags can be shown under each other, instead of side by side.
My test/debug html looks like this:
<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>
<p> </p>
<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
<tr><td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</td><td valign="top" style="background-color:orange; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>
Output of this code is here:
(source: vantslot.be)
(Text does not matter, only the layout, so I have shrunken it a bit).
The top layout is using the divs : wrong
Bottom layout is using the table : good
My question / problem
How can I position the "right" bar, on the right of the content, while maintaining the dynamic width of the content, and not using table layout?
What I actually want is the right pane appear on the right of the content, but when the browser is too small (< 20em), it can be displayed under it. This is not possible with tables, so I prefer a div solution.
In the final Website the contents of the header / footer / content and right will be dynamically generated, so I cannot hardcode the height.
Edit
Thx for all the answers, this really helps me forward.
I see what is "wrong" here. I have put the right pane after the content pane. If I put the right pane before the content pane, it renders correctly (after adding a margin-right to the content).
This is a bit illogical for flow of the html. Since the content is more important as the content in the right pane, I would like it to be send to the client before the right pane.
This will allow your right, fixed-width column to fit in the margin of your other column, and therefore be on the same line:
#right
{
float:right;
width:18em;
}
#body
{
margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}
Now the body's div, which defaults to 100% screen width, will be fluid, and your right column will be fixed width.
Add a clear:both to your right column. To manage the height of having a float at the bottom of your main content area use a clearfix. Also, since you want the right column to float underneath the left column, there's no need to float the left column?
Try this code:
<!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" xml:lang="en" lang="en">
<head>
<title>Пример</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
#menu{
width:250px;
float:right;
background:#FFC597
}
#info{
min-width:350px;
background: red;
}
#footer{
height:20px;
min-width:600px;
background:#B9CC8A;
clear:both
}
#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER</div>
<div id="menu">MENU (side bar)</div>
<div id="info">INFO (central pane)</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Not tested (yet), but I think I have found the solution to the problem.
http://www.alistapart.com/articles/holygrail/
This solutions allows to mix fixed and liquid layout (terms I learned from asking this question).
Try the following CSS snippet:
display: table;