I'd like to create a box around some text, with the border stopping at the point of the title. See below for example.
I've found this in an earlier question, but as it's now 10 years old I'm wondering whether it's out of date, or whether there is a better fix.
I've attempted a similar method myself, and am more or less there. I'm curious whether there is a go-to method for achieving this or whether my method is fine.
.welcome-box {
border: 1px solid #e75d14;
padding: 0px 20px;
}
.welcome-box h2 {
margin-top: -18px;
background-color: #fff;
display: inline-block;
padding: 0px 10px;
}
<div class="welcome-box">
<h2>WELCOME</h2>
<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</div>
<fieldset> and <legend> tags do that behavior by default, but the semantics police may be upset if it's used for something other than form controls. Regardless the <fieldset> content categories are more than enough to cover any purpose a <div> is permitted to have.
Demo
* {
margin: 0;
}
legend {
text-align: center;
}
legend h2 {
padding-bottom: 0
}
<fieldset class="welcome-box">
<legend>
<h2>WELCOME</h2>
</legend>
<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum
text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</fieldset>
Related
I am displaying a simple HTML markup in Chrome mobile emulator and I observe that the size of the rendered text gets suddenly very large when text length goes beyond a certain threshold (I observe the same issue on a physical device):
<html>
<body>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</body>
</html>
renders like this:
But
<html>
<body>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</body>
</html>
renders with a larger font:
Why is that so?
Use css to set the font size manually and instead of using a specific number of pixels(pixels is the default) to determine the size use em like this.
body{
font-size: 1.5em;
}
This forces the HTML to keep the text size proportional despite the browser or window size.
You could use inline css as well like this.
<BODY>
<span style="font-size:1.5em;">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</span>
</BODY>
This happens because when the browser determines the font size, based on pixels, it pays no attention to the size of the screen that it is being displayed on. However, when you use em the browser bases the size on how many pixels it has to work with.
This happens because browsers have native CSS sheets that they apply to markup when they display it - that is why many front-end frameworks use a variant of normalize.css.
NOTE: As to why the number of characters changes the size of the font, I do not know, you'd have to refer to that browser's default style sheet. It may also have to do with the fact that your text falls between body tags and not paragraph tags, anchor tags, header tags, etc.
Add following code in <head>. Browser thinks that is desktop version and try to scale it. that why it’s so small:
<meta name="viewport" content="width=device-width, initial-scale=1">
So I have a web page the content of which I would like to be focused in a center portion with a white background, some 800 pixels wide. The side of the page will be in blue.
The problem is that I don't seem to be able to extend this center div consistently down to the bottom of the page. (The page in question is here.)
<html>
<head>
</head>
<body bgcolor = "#1DAEEC">
<div class = "bodyDiv">
<div class = "accueilBanner">
Logo and navigation items
</div>
<div class = "belowBanner">
<div class = "searchBar">
Search bar content
</div>
<div class = "barredContent">
<div id = "rssNews">
News Feed
</div>
<div id = "descriptif">
Text description here - very long and extends down below the lowest item on the searchBar
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The blue cuts off after the end of the content of the searchBar. I suspect the problem arises from the fact that the searchBar floats left and the barredContent is in absolute position. But there isn't much I can do to tinker the descriptif, since the rssNews floating off to the right and I need to continue having the descriptif wrap around as such :
____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem | RSS NEWS |
| C |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| O |lorem ipsum lorem ipsum lorem ipsum lorem | |
| N |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| T |lorem ipsum lorem ipsum lorem ipsum lorem | |
| E |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| N |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
| T |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
Here's my CSS:
html {
max-width: 800px;
height:100%;
margin: 0 auto;
}
body {
height:100%;
font-family: "Lucida Grande", Tahoma;
font-size: 14px;
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}
.bodyDiv {
min-height:100%;
width:800px;
background-color:#FFFFFF;
margin:0px;
padding: 3px;
}
.accueilBanner {
max-width: 800px;
text-align: center;
position: relative;
}
.belowBanner {
position: relative;
max-width: 800px;
}
.searchBar {
float:left;
width:25%;
font-size: 13px;
}
.barredContent {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 73%;
}
#rssNews {
float:right;
width: 33%;
margin-left: 2%;
margin-bottom: 5px;
font-size: 10px;
}
#descriptif {
text-align:justify;
}
PICTURE:
Is it possible to fix this using only CSS? Or is JavaScript necessary? If so, then what script?
The problem is that .barredContent is absolute positioned.
If you change the style of .barredContent to
.barredContent {
float: right;
width: 73%;
}
it should work as you want.
You can then also remove the height and min-height style properties from your body tag and its first child element.
I hope to have helped you :)
Here is a quick example of how you could achieve this. What you need to do is to add this to your css:
html, body {
width: 100%;
height: 100%;
}
Once you have added this you can now set the height of your divs to 100% so to take the full height of the page.
Here is a FIDDLE show this in practice.
You could more easily solve this problem by putting #rssNews outside and next to .barredContent instead of inside, and adding static width to them, but, if you want a CSS-"hack", this is the only one I know of
.html, .body, .mydiv { height: 100%; }
I'm not sure if it works anymore, but if it does, remember that it used to force the scrollbar to appear because 100% height is more like 102% of what you can actually see in the browser, so you will have to reduce the height to about 98%, if not 97%. It depends on the browser.
I have a page in which the right column content is wrapped around the left column. If I have a simple text or paragraph then the page looks fine.
But suppose the right side content contains a <ul> <li> list element the whole indentation is lost.
See the fiddle here: http://jsfiddle.net/8DB6e/1/
It appears the problem is the wrapRightCol div container is overlaid on top of leftcol. Ideally wrapRightCol container should stay to the right of leftcol and then wrap around.
Can anyone help me here to correct the styles so that I can have the list element placed correctly beside left column with default indentation(i.e with proper padding & margin).
N.B: I am using the Bootstrap UI library
Fiddle HTML
<div class="wrapper">
<div class="leftcol" >
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum</p>
</div>
<div class="wrapRightCol">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<h4>Example list</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p> Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum</p>
</div>
</div>
Fiddle Style:
.wrapper {
float: left;
}
.leftcol {
width: 150px;
float: left;
clear: right;
margin-right: 5px;
border:1px solid #000;
}
You can change the list-style-position property:
li{
list-style-position:inside
}
JSFiddle
First Method
.wrapRightCol ul{ overflow: hidden; }
Second method
li{
list-style-position:inside
}
Demo1
Demo2
list-style-position:inside will bring the bullets inline with the other text in .wrapRightCol but another alternative would be to add extra margin-right to .leftCol to move the right column away from the left and provide some gutter - margin-right:1.5em does the trick.
Based on the fiddle, there is no need for float:left on the .wrapper or clear:right on the .leftcol.
http://jsfiddle.net/z7pVh/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div within a tag. The a tag has certain styles like color etc, which are also applied to the div tag. I do not want the styles of a tag to be applied to the div tag. Is there an easy way to do this?
As others mentioned this is how CSS works, child inherits properties of its parents and if you don't want inherited property, you have to manually override.
But, there is small feature, special value auto value - if you use id for valid property eg. width that element won't get inherited value, but default calculated by browser.
http://jsfiddle.net/G3WUw/
HTML
<div class="general">
<div>
Width set to 200px by general rule<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="special1">
Width set to 300px by specific rule<br>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="special2">
Width set to default value calculated by browser<br>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
CSS
.general div {
background: lightgreen;
margin: 5px 0;
width: 200px;
}
.general .special1 {
width: 300px;
}
.general .special2 {
width: auto;
}
This is how CSS (cascading style sheets) work. You would need to do.
a div { color: #f00; }
To override the color you set on the parent <a> tag.
As the <div> tag is within the <a> tag, the CSS styles applied to the <a> tag will be inherited by the <div> tag.
You can simply apply a CSS class to the <div> tag which has the CSS styles that you need. So the class applied to the <div> tag will override the parent <a> tag styles.
I have a main division in which two divisions are present
One is left DIV and another is right DIV
Fiddle Here
HTML is
<div class="main">
<div class="left">
Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text.
</div>
<div class="right">
some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here
</div
</div>
And CSS is
body
{
background-color:black;
}
.main
{
width:80%;
background-color:White;
opacity:0.9;
margin-left:auto;
margin-right:auto;
margin-top:25px;
}
.left
{
width:68%;
float:left;
background-color:White;
padding:2%;
font-family:Calibri;
}
.right
{
background-color:White;
width:26%;
padding:1%;
float:right;
}
I want both the DIVs must be of equal height always.No matter how much text is present in it.
Now Height of my right DIV is less than left DIV as in fiddle.
Help Me. Thanks in Advance
Add this to .main
height: 30%;
overflow: auto;
Link: Fiddle Example