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;
}
Related
Here I try to align "Table for" text with class="table" by center, but nothing happens, I think it associated with elements' positions maybe.
.table{
position:relative;
margin:5px;
width:100%;
text-align:center;
}
Here is a codepen
I'm very beginner in front-end, so do not judge strictly.
body{
background-color: grey;
}
.menu{
width:300px;
height:400px;
background-color:white;
position:relative;
}
.lupe{
float:right;
}
.arrow{
float:left;
margin-bottom:157px;
}
.ball{
position:relative;
left:10px;
margin:20px;
}
.table{
position:relative;
margin:5px;
width:100%;
text-align:center;
}
<div class='menu'>
<button class='arrow'><img src=http://iconspot.ru/files/216453.png width=20px height=5%></button>
<button class='lupe'><img src=http://s1.iconbird.com/ico/2013/9/452/w512h5121380477032search.png height=32px width=20px></button>
<div class='table'>
<img class='ball' src=http://i.imgur.com/f3axIAv.png>
<a >Table for</a>
</div>
</div>
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;
I'm having trouble getting columnContainer to center inside sectionTwo. The code is below. No matter what I do, it seems to be left aligned.
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-left:30%;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
Thanks for your help!
If you are trying to center 'ColumnContainer' it already centered it is because you have them both set to 100% width;
change it to this to see it actually working:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
background-color: red;
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
text-align: center;
}
I don't think you should use margin-left 30% on your image if you want to center it. Indeed, as an inline element, you can use text-align: center on your parent div to do the trick :
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-top:20px;
text-align: center;
}
this one will help you:
section {position:relative;}
section #your_id {
position:absolute;
top:50%;
margin-top:-100px; */half of your height*/
right:50%;
margin-right:-100px; */half of your width*/
}
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 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 ;)