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;
}
Related
I tried to create a cross at the center of the body with a red background, screenshot:
This is the html fragments:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0;
margin:0;
width:100%;
height:100%;
}
.mask{
width:100%;
height:100%;
}
.mask .row{
position:absolute;
left:50%;
width:40px;
margin-left:-20px;
top:50%;
}
.mask .col{
position:absolute;
top:50%;
height:40px;
margin-top:-20px;
left:50%;
}
</style>
</head>
<body>
<div class="mask">
<div class="row" style="height: 2px; margin-top: -1px; background: red;"></div>
<div class="col" style="width: 2px; margin-left: -1px; background: red;"></div>
</div>
</body>
</html>
And it worked as expected in IE7+,FF, chrome. Demo:http://jsfiddle.net/3f2RE/
However the div have an unexpected height in IE6, screenshot:
I do not know what's going on? Any way to fix it?
so overflow: hidden solver your problem, so its commenter's task to paste comment as answer. Or askers should do this, so other visiters will know that this question has a right answer.
so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.
I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.
CSS file:
#media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
#media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><img src="images/buttons/btn_logo.png"></div>
<div id="primaryNav">
<img src="images/buttons/btn_home.png">
<img src="images/buttons/btn_link1.png">
<img src="images/buttons/btn_link2.png">
<img src="images/buttons/btn_link3.png">
<img src="images/buttons/btn_link4.png">
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/
Just remove the CSS:
position: fixed;
from the #wrapper id and the background-image will appear
I have a parent div and a child div.I would like to center to know if i could express the width and the height of the child as a percent of the parent,for instance
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width:800px;
height:100px;
background-color:grey;
}
.two{
margin-top:30px;
margin-bottom:30px;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
To see it in action http://jsfiddle.net/thiswolf/3qRgH/
The outer div(parent) has a height of 100px and my child div has a height of 40px.I would like to center my child inside the parent theme,so,100px - 40px = 60px and i divide the 60px twice and assign the child div margin-top:30px and margin-bottom:30px;.I however would like to express the margins in percentage form.How would i express the margins in %.
You can center the divs this way (edited) :
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width: 800px;
background-color: grey;
}
.two{
min-height: 40px;
margin: 30% 355px;
width: 90px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</div>
</div>
</body>
</html>
See http://jsfiddle.net/3qRgH/2/
Is this what you 're asking?
http://jsfiddle.net/thiswolf/5AZJD/
That seems to work but i haven't proved it
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
position:relative;
width:800px;
height:100px;
background-color:grey;
}
.two{
position:absolute;
top:30%;
bottom:30%;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
Can anybody help, I`m starter in web? Here is code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
widows:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
</div>
</body>
First, for width, u use window, use width:50px; for appear div image and div text on div window, use clear div, see code below...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
width:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
<div class="clear"></div>
</div>
</body>
Is ok?
Misspelt width?
widows:50px;
because you have float:left for the two child elements you have to clear them. Add overflow:auto for the .window.
Demo: http://jsfiddle.net/CVcjf/1
you should assign a width and height to the divs in order to make its visible.
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.