I am confused as to why when I float an object it no longer expands the border of the container it is in. Here is a simple bit of code I start with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>
<style>
.content
{
border: #000000 solid 3px;
clear: left;
padding: 1em;
}
.stuff
{
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
<div class="stuff">
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
</div>
</div>
</body>
</html>
This link will display the results of this code
When I change the style of .stuff to:
.stuff
{
float:right;
}
This link shows what I get now
I would appreciate someone explaining why the floating content no longer expands the parent div or is contained in the parent div .content ?
thanks in advance
You'll need to add overflow: hidden; to your container element. Here is a working jsFiddle.
Edit: both overflow: hidden and overflow:auto work in this case.
You need overflow: auto to the parent container, not overflow: hidden.
Elements after the floating element will flow around it.
You can avoid this by using the clear property.
So right after your div having class stuff, add this:
<div style="clear:both"></div>
See your example on jsfiddle here
You need to use the clearfix hack to fix this. Try this code instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>
<style>
.content
{
border: #000000 solid 3px;
clear: left;
padding: 1em;
zoom: 1;
}
.stuff
{
float: left;
}
.content:before, .content:after
{
content: "";
display: table;
}
.content:after
{
clear: both;
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
<div class="stuff">
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
</div>
</div>
</body>
</html>
To have a float expand the border of the container it is in you will need to apply what is called a clearfix to the container. There are probably a dozen different ways to do this, so instead of giving you one, I'll refer you to an excellent question whose answers list several: What methods of ‘clearfix’ can I use?
Related
I have (2) div elements displayed as inline-block's.
I'm attempting to make the second div container that is wrapped around a <p> element extend to the width of the screen. Not sure how to accomplish this.
Ideally, the red container will stretch to the edge of the screen to the right.
<div style="background-color: grey; width:16px; display: inline-block;">
<p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
<p>Test Text</p>
</div>
You want the second block to behave like a display: block (taking up as much width as possible) while keeping the first block as a display: inline-block.
Thus, in this case, you need a float: left, not display: inline-block.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: grey; width:16px; float:left">
<p>-</p>
</div>
<div style="background-color: red;">
<p>Test Text</p>
</div>
</body>
</html>
Note: a more modern way of doing this is using display: flex.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="display: flex;">
<div style="background-color: grey; width:16px;">
<p>-</p>
</div>
<div style="background-color: red; flex: 1;">
<p>Test Text</p>
</div>
</div>
</body>
</html>
If you want to keep your element as display: inline-block, you can make use of calculation-driven variables, and set the second div to occupy 100% of the width of the container minus the width of the first element (and margins):
:root {
--left-width: 16px;
}
div:nth-of-type(1) {
display: inline-block;
background-color: grey;
width: var(--left-width);
}
div:nth-of-type(2) {
display: inline-block;
background-color: red;
width: calc(100% - var(--left-width) - 4px);
}
<div>
<p>-</p>
</div>
<div>
<p>Test Text</p>
</div>
What I need is two divs in following fashion:
[-width-of-content-][------------------remaining-width-of-page----------------------------]
I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!
<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>
You could also achieve this using flexbox: http://jsfiddle.net/yr05wkuh/1/
This would keep your DIVs the same height, without requiring you to set a value.
CSS
.container {
display: flex;
}
.div1{
background-color:yellow;
}
.div2{
flex: 1 0;
background-color: red;
}
HTML
<div class="container">
<div class="div1"> Hello</div>
<div class="div2"> THIS DIV BREAKS</div>
</div>
Here's a good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You only need to float the left element.
HTML
<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>
CSS
#left,#right{
height:50px;
}
#left{
background:red;
float:left;
}
#right{
background:green;
}
https://jsfiddle.net/qb3374ou/
EDIT: right div with content.. same result
https://jsfiddle.net/qb3374ou/1/
two divs side-by-side is impossible but this might work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
width of content
<div class="col-sm-9">
Remaining width of page
</div>
</div>
</div>
hope it helped.. .
Sorry bro,.. my mistake... this one is more working :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">Width of content</div>
<div class="col-sm-8" style="background-color:lavenderblush;">Remaining Pages</div>
</div>
</div>
</body>
</html>
Not sure if I'm understanding you correctly, but I think you're trying to get this:
HTML:
<div class="right">Text goes here</div>
<div class="left">Text for the left div goes here</div>
CSS:
.right {
float:right;
background: #ddd;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.left {
background-color:#ccc;
height: 100px;
}
fiddle: http://jsfiddle.net/veW2z/88/
Actually,"col-md-" are the classes of Bootstrap ..u need to include the Bootstrap css to make it work..Here is the link for itenter link description here
This contain complete Bootstrap but u need to include only the css in it and write the code
What I'm trying to accomplish is this:
Name Surname Phone: 123
Joe Cool Fax: 123
Charlie Brown Email: 123
Some more text goes here, after these two introductory columns. Normal text just
keeps going, and going, and going ...
that is to align the right column of text? Is it possible to make that via Markdown, or maybe via HTML or CSS tables, but in such a way that a table border isn't visible?
Here the HTML and CSS as per your question.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.panel-inside {
padding-left: 0px;
padding-right: 0px;
overflow:auto;
}
.row
{
height: 30px;
width:100%;
vertical-align:middle;
}
.label
{
font-size: 12pt;
display:inline;
float:left;
margin-left:5px;
width:200px;
}
.label-right
{
font-size: 12pt;
color:#686868;
display:inline;
float:right;
margin-right:7px;
width:200px;
}
.listSeparator
{
clear:both;
height:0;
}
</style>
</head>
<body>
<div class="panel-inside">
<div class="row">
<div class="label">Name Surname </div>
<div class="label-right">Phone: 123</div>
</div>
<div class="listSeparator"> </div>
<div class="row">
<div class="label">Joe Cool</div>
<div class="label-right">Fax: 123</div>
</div>
<div class="listSeparator"> </div>
<div class="row">
<div class="label">Charlie Brown</div>
<div class="label-right">Email: 123</div>
</div>
</div>
<div id="content">
<p>Some more text goes here, after these two introductory columns. Normal text just keeps going, and going, and going ...
</p>
</div>
</body>
</html>
For output here is the fiddle: http://jsfiddle.net/LsGSc/
I am trying to create one table using the <span> and <div> concept.
But the table is not coming together properly. I couldn't find where the issue is. Please tell me what the problem is. I have to produce 4 to 5 lines in a same row.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.line1
{
background-color:#AAAAAA;
height: 150px;
width: 1px;
display: block;
}
.line2
{
background-color:#CE5611;
height: 150px;
width: 1px;
display: block;
margin-left: 121px;
}
</style>
</HEAD>
<body>
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
</body>
</html>
Instead this way of going :
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
do
#wrapper .content{
float:left
width:100px;
padding:.5em;
}
#wrapper .content span{
font-weight:bold;
}
<div id="wrapper">
<div class="content"><span>line 1</span></div>
<div class="content"><span>line 2</span></div>
<div class="content"><span>line 3</span></div>
</div>
you got the idea ..
Do you really want the classed spans to have display: block? That forces each one onto a seperate line. Functionally, <span style="display: block"> is kinda the same thing as <div> (and <div style="display: inline"> is kinda the same thing as <span>).
You're probably looking for display: inline-block. That gives you the ability to block attributes (height, width) like you are, but still leave it moving around within the surrounding contents. Another alternative is to use display: table-cell. There's a chart of display support here.
You should use a <table>.
I prefer using li and span tags instead of div and span. It makes manipulation much easier. With li as block and span inline-block.
Hi I have a problem cosidering a floating div that i can't figure out. I know many people have got the same problem but i have not found a normal solution. maybe you can help me ?
I want that the div on the left will grow on it's height when the one on the right will grow it's height. The one on the right will grow dynamicaly, because the text or other things in it will have diffrent sizes.
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
float:left;
}
#content2
{
width:300px;
overflow:hidden;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content1">
1
</div>
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</body>
</html>
This is the eternal css column height issue. There are some (painful) ways to work around it with pure css, but I've been happy using this jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/
It's not the "right" way to handle it but in my experience it's the only way that won't drive you insane.
I usually use this snippet of jQuery..
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight($('.your-divs'));
Is that ok ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Untitled Document
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>
</body>
this solution is what i was looking for but i have a very important question i want to place a div at bottom of the content1 with a static height and width but i can't do it because the div just wont go there the div can also be an imgage, you can't use position:absolute because the content1 div height will not be static so the div in it will not be in one place all the time. I'm using a solution that helped me a lot and I just want to add to it that div at the bottom on content1. So it looks like this content1 have got 2 divs one in the top as first and the other in the bottom. It is very important to use this code because it fixes the div height problem that I mentioned:
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>