I need to center a piece of text "main" with another piece of text "sub" sticking out to the right. I don't want both to be centered. Center "main", with "sub" on the right. It doesn't need to work in IE6. I've got it working, but the bottoms of the text don't line up right. I applied the style bottom:.2em and that got it working. But I want to know if there is a more logical way of aligning the bottoms of the text. You can fiddle with it here link text
Update: How can I get rid of the padding around "main" and "sub"? that might help.
<!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>
<style type="text/css">
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
Main
<div class="sub"> (Sub)</div>
</div>
</div>
</body>
</html>
put 3 divs
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.left{
float:left;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
float:left;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
float:left;
}
<div class="container">
<div style="float:left">
</div>
<div class="main">
Main
</div>
<div class="sub"> (Sub)</div>
</div>
add float:left in each divs.
Related
first div float:left second div overflow:hidden and margin-top:3000px invalid.
div2 set margin-top:3000px no margin-top!?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body{
margin:0;padding:0;
}
.box{
width:300px;
height:300px;
margin-top:20px;
background:blue;
}
.sub{
width:100px;
height:100px;
margin-top:30px;
margin-bottom:20px;
background-color: yellow;
}
.fl {
float:left;
margin-right: 100%;
}
.clear{
clear:both;
}
.absolute{
position:absolute;
}
.inline-block{
display: inline-block;
}
</style>
</head>
<body>
test
<div class="box" style="margin-left:20px;">
<div class=" box sub fl" style="">ccc</div>
<div
class="box sub"
style="
overflow:hidden;
background:red;
margin-top:3000px;">
div2
</div>
<div class="box sub" style="overflow:hidden;">
</div>
</div>
</body>
</html>
div2 margin-top eaten by float:left div ?
I have searched the web, but I cannot find the answer. Hope someone help me
out.
In my page, the right column is push down under the left column because the
width problem. Is that any way I don't need to change the width for all
element? I means let the right column is overlap the div which class is
wrapper?
There is my html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
}
div.wrapper {
width: 80%;
border-style:solid;
border-color:black;
}
div.one {
width: 300px;
float: left;
height: 300px;
border-style:solid;
border-color: #0000ff;
}
div.two {
width: 1024px;
border-style:solid;
border-color:yellow ;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
?
</body>
there is the screen shot of my page:
Solution:
<!DOCTYPE HTML>
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color:purple;
}
div.wrapper {
width:80%;
float:left;
border-style:solid;
border-color:black;
}
div.one {
width:45%;
float:left;
height:300px;
border:1px solid blue;
}
div.two {
width:45%;
float:right;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
</body>
</html>
Result:
Try changing second div style to
div.two {
border-style:solid;
border-color:yellow ;
margin-left: 310px;
}
I am finding it bit confusing working around this problem.
I have parent DIV and 3/more Child DIV.
Parent DIV is center aligned and child DIV should be floating left but should be aligned center.
CSS contains,
.center {
float:left;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
I have a sample of the code link here...
If you want to horizontally align your elements centrally, then don't float them.
Change the way they are displayed to inline-block and align them in the center by changing the text-align style of their parent:
#parent {
text-align:center;
height:450px;
width:75%;
border:1px solid blue;
}
.center {
display:inline-block;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
<div id="parent">
<div id="child1" class="center"></div><!--
--><div id="child2" class="center"></div><!--
--><div id="child3" class="center"></div>
</div>
Be sure to have no white-space or newlines between your children <div>s (in your HTML, that is) or comment it out. Now that these are inline elements, this white-space will be interpreted as a space.
#parent{
display: flex;
justify-content:center;
flex-direction:row; /*default value is row*/
height:350px;
width:75%;
border:1px solid blue;
padding: 10px 0;/* not mandatory */
}
.center {
height:250px;
width:15%;
margin:5px;
border: 1px solid black;
}
<div id="parent">
<div id="child1" class="center">
</div>
<div id="child2" class="center">
</div>
<div id="child3" class="center">
</div>
</div>
Flex helps us achieve certain things with ease.
Automatic margins will not apply to an element which has a float applied. Removing the float should get you started...
Center horizontally & vertically
Use top for vertically center and calc is calculating dynamically top value.
the top will work with position - relative.
Using text-align:center in parent & display:inline-block in child for Horizontally center.
.parent {
height:400px;
width:400px;
position:absolute;
border:1px solid black;
text-align:center;
}
.child {
position:relative;
height:70px;
width:70px;
border:1px solid red;
top:calc(50% - 70px/2);
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</body>
</html>
There are three div, d1, d2 and d3, I want the d1 can wrap the content for vertical, but visible for horizontal.
If d2 and d3 have no float properity, d1 will give me the result I want.
but d2 and d2 have float properity, I need add overflow-y:auto to make it wrap vertical.
and I added overflow-x:visible, but it still have a scroll bar.
so how to keep the horizontal visible?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#d1
{
background-color:red;
padding:10px;
width:100px;
overflow-x:visible;
overflow-y:auto;
}
#d2
{
background-color:blue;
float:left;
width:150px;
height:30px;
}
#d3
{
background-color:green;
float:left;
width:50px;
height:230px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">in</div>
<div id="d3">
out
</div>
</div>
</body>
</html>
If i understood your question, you can solve this using a "clear" DIV. Edited code:
CSS
<style>
#d1
{
background-color:red;
padding:10px;
width:100px;
overflow-x:visible;
}
#d2
{
background-color:blue;
float:left;
width:150px;
height:30px;
}
#d3
{
background-color:green;
float:left;
width:50px;
height:230px;
}
.clear{
clear:both;
}
</style>
HTML
<div id="d1">
<div id="d2">in</div>
<div id="d3">out</div>
<div class="clear"></div>
</div>
<style>
body{
background:#FF9900;
color:#FFFFFF;
}
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
}
.header{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.fotter{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Footer</div>
</div>
If i give a wrapper div height:"500px" i can see the background color black. But if i change the to height="auto" i cant see the color.
Can some one please help me with this ?
Please see here..link text
Add overflow: hidden or overflow: auto to your #wrapper styles.
You have to do this, because containers with floated elements inside them don't have any height by default, so you have to use the above hack (or some other) to force the browser to give the container some height.
You can also add a <div style="clear: both;"></div> as the last element in your #wrapper and that should work also.
Is it because you have zero content? Add 'lorem ipsum' and see what you get.
<!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>
</head>
<style>
body{
background:#FF9900;
color:#FFFFFF;
}
#wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background-color:#990000;
clear:both;
}
.header{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.footer{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<body>
<div id="wrapper">
<div class="header">Header</div>
<div class="body_content">
<p>Body Content</p>
</div>
<div class="footer">Footer</div>
<hr/>
</div>
</body>
</html>
hope this will solve the problem