I want the leftcol and rightcol divs to float next to each other. How do I do that?
#charset "utf-8";
/* CSS Document */
#container{width:100%; height:1000px; margin:auto; background-color:#00ffff;}
#header{width:95%; height:80px; margin:auto; margin-top:50px;}
#logo{width:10%; height:50px; margin-top:10px; margin-left:20px; float:left;}
#navbar{width:60%; height:50px; margin-top:10px; margin-right:10px; float:right;}
#maincontent{width:95%; height:70%; margin:auto; margin-top:15px;}
#leftcol{width:14%; height:30%; margin-left:15px; margin-top:20px; position:fixed;}
#rightcol{width:40%; height:30%;}
#charset "utf-8";
/* CSS Document */
#container{width:100%; height:1000px; margin:auto; background-color:#00ffff;border:1px solid black;}
#header{width:95%; height:80px; margin:auto; margin-top:50px;border:1px solid black;}
#logo{width:10%; height:50px; margin-top:10px; margin-left:20px; float:left;border:1px solid black;}
#navbar{width:80%; height:50px; margin-top:10px; margin-right:10px; float:right;border:1px solid black;}
#maincontent{width:95%; height:70%; margin:auto; margin-top:15px;border:1px solid black;}
#leftcol{width:14%; height:30%; margin-left:15px; margin-top:20px;border:1px solid black;display:inline-block;}
#rightcol{width:80%; height:30%;border:1px solid black;display:inline-block;}
<html>
<head></head>
<body>
<div id="container">
<div id="header">
<div id="logo">
#LOGO
</div>
<div id="navbar">
#NAVBAR
</div>
</div>
<div id="maincontent">
<div id="leftcol">
#leftcol
</div>
<div id="rightcol">
#rightcol
</div>
</div>
</div>
</body>
</html>
add this to your div css code it will make div's aligned
display:inline-block;
Related
I want margin-top:10px to be displayed on the top of box3.
Here is the proper codes on firefox.
<div class="clear"></div> was written as a single line before div box3,and
write div.clear{clear:both;} as a special part.
div.box{
width:105px;
height:200px;
border:1px solid red;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.clear{
clear:both;
}
div.box3{
width:100px;
height:80px;
border:1px solid red;
margin-top:10px;
}
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear"></div>
<div class="box3">box3</div>
</div>
</body>
Now i move clear:both; in the div.box3,the whole css code as below.
div.box{
width:105px;
height:200px;
border:1px solid red;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box3{
clear:both;
width:100px;
height:80px;
border:1px solid red;
margin-top:10px;
}
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear"></div>
<div class="box3">box3</div>
</div>
</body>
No 10px at the top of div.box3.
I know right way to solve it ,want to know the principle behind the proper css code.
So, I wan't the wrapper-adds to be on top of one another, but I want the wrapper-diary div to be beside the two. I'm not exactly sure why wrapper-diary won't align next to the two divs because they are all within the same wrapper. The margins denote that they should be able to align the way I want them to, but they won't for some reason.
HTML:
<div id="wrapper">
<div id="wrapper-add">
<div id="addFood3">
<!--stuff-->
</div>
</div>
<div id="wrapper-add">
<div id="addFood2">
<!--stuff-->
</div>
</div>
<div id="wrapper-diary">
<!--stuff-->
</div>
</div>
CSS:
#addFood3{
margin-top:75px;
margin-bottom:75px;
margin-right:auto;
margin-left:13%;
border-width:2px;
border-style:solid;
border-color:#ABABAB;
padding:10px 10px;
float:left;
background:#FFFFFF;
width:235px;
border-radius:3px;
}
#addFood2{
margin-top:40px;
margin-bottom:40px;
margin-right:auto;
margin-left:13%;
border-width:2px;
border-style:solid;
border-color:#ABABAB;
padding:10px 10px;
float:left;
background:#FFFFFF;
width:235px;
border-radius:3px;
}
#wrapper{
width:100%;
height:100%;
position:absolute;
overflow:auto;
}
#wrapper-add{
width:25%;
height:260px;
overflow:hidden;
}
#wrapper-diary{
width:74%;
margin-top:0px;
margin-left:25%;
position:absolute;
overflow:hidden;
padding:0%;
z-index:-3;
}
Okay, so here's the code
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
jsfiddle
As you can see, I tried to put a hr between the two divs. This is good, except for the white space around the black line that I want. I know it's supposed to be like this, but is there a way to get just the black line?
Simple use margin: 0 to hr element:
hr{
margin: 0;
}
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
hr {
margin: 0;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
I made a div have class footer and want footer to be in the end of the page not fixed actually.
it is showing when the data of content element finish , i mention min-height of content equal t 90% so that if there is no more data then also in this case footer should be end of the page.
here is my css code
.header-cont
{
width:100%;
position:absolute;
top:0px;
}
.header {
height:50px;
background:#3399FF;
border:1px solid #CCC;
width:100%;
margin:0px auto;
text-align:center;
}
.footer{
position:absolute;
text-align:center;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
width:100%;
background-color: #3399FF;
height:35px;
}
.footer-data
{
padding:7px;
text-align:center;
font-size:18px;
}
.content{
min-height:90%;
width:1130px;
background: white;
border: 1px solid white;
top:80px;
margin-right:155px;
margin-top:100px;
margin-left:125px;
}
HTML code
<div class="header-cont">
<div class="header">
</div>
</div>
<div class="content">
</div>
<div class="footer">
<div class="footer-data">
footer data
</div>
</div>
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)