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
Related
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>
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">
I need to move my search box when user focus on it. I am using css animation and that is working but not working fine. I want to make like the current search box is moving up but right now it is seems like new search box is replacing the current search box.
$('input').focus(function(){
$('.search').addClass('fixed');
})
$('input').blur(function(){
$('.search').removeClass('fixed');
})
body{
margin:0
}
.banner{
height:200px;
background:#ff0000
}
.search{}
.search-bar{ height:50px; background:#666; padding-top:10px}
.search-bar input{width:100%; height:35px}
.animated{background:#fff; opacity:0; position:fixed; bottom:0; height:0px; transition:height 0.5s; width:100%}
.fixed .animated{ height:100%; opacity:1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div class="banner">
</div>
<div class="search">
<div class="search-bar">
<input type="text">
</div>
<div class="animated">
<div class="search-bar">
<input type="text">
</div>
</div>
</div>
<div class="body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
</div>
</div>
Here is a sample having the same animation using only 1 search box (input)
$('input').focus(function(){
$('.search').addClass('fixed');
})
$('input').blur(function(){
$('.search').removeClass('fixed');
})
html, body {
margin: 0
}
.banner {
height: 200px;
background: #ff0000
}
.search-bar {
height: 50px;
background: #666;
padding-top: 10px
}
.search-bar input {
width: 100%;
height: 35px
}
.search {
transition: bottom 0.5s, top 0.5s;
background: #ddd;
width: 100%;
min-height: 50px;
top: 200px;
bottom: 40%;
}
.search.fixed {
transition: bottom 0.5s, top 0.5s;
top: 0;
bottom: 0;
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div class="banner">
</div>
<div class="search">
<div class="search-bar">
<input type="text">
</div>
</div>
<div class="body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
</div>
</div>
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/
I have a sample page as shown below
HTML code:
<div class="container">
<div class="header floatL width100p">
<h2>
Header
</h2>
</div>
<div class="content floatL width100p">
<div class="floatL width29p npv">
<p>navigation div</p>
</div>
<div class="floatL width70p rtb">
<div class="floatL width100p ql">
<p>
div one
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p mtbs">
<p>
div two
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p widdiv">
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer floatL width100p">
<h2>
Footer
</h2>
</div>
<div class="clear"></div>
</div>
The styles are:
*,html{
margin: 0;
padding: 0;
}
.container{
width:960px;
margin:20px auto;
}
.header h2,.footer h2{
text-align: center;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
.clear{
clear:both;
}
.width100p{
width: 100%;
}
.width29p{
width: 29%;
}
.width70p{
width: 70.8%;
}
.header,.footer,.content{
border:1px solid;
}
.npv{
border-right: 1px solid;
height: 100%;
}
.ql,.mtbs{
border-bottom: 1px solid;
}
.width40p{
width: 40%;
}
.incont{
margin: 4%;
background: #ccc;
border:1px solid red;
}
I would like to know why the left navigation div is not occupying 100% height as you can see by running the above code.
Any help would be appreciated. It is urgent...
Use css tables
FIDDLE
CSS
.content
{
display: table;
height: 100%;
}
.npv, .rtb
{
display: table-cell;
}
If you want to know more about the problem than simply fix it, this is a nice article that explains the problem and give you multiple solutions: Fluid Width Equal Height Columns