Here is my code for css div based layout. I want a search box inside the #header div. But when I add margin or padding to the #header .search class, it will add this to height of #header div. Please help me how can I get it correctly. I want the search box at 10px margin-bottom from where #header div ends.
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
}
You could position the search box absolutely inside the #header
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
position:relative; // parent container
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
position:absolute;
left:0; bottom:10px;
}
This way your search box won't ever affect the parent containers.
Demo: http://jsfiddle.net/fparent/AyyZG/
insert a display on both tags, and add a margin-bottom. should work
Related
I use CSS to style aside. After applying this style, aside moves to left but I want it at the right of the page. I want aside to have a height that is relational to the container. i.e. I want its bottom margin to touch the top of the footer no matter what is the height of the container.
Style:
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
position:absolute;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
Remove position: absolute;. If you want to keep position: absolute; you can add right: 0; instead.
html,body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
height: 100%;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
<aside>I'm at the right side</aside>
As Gustaf said, you have to remove the 'position: absolute' to switch the side. To define the height, all the parents of element, needs to have a defined height, so the children element will have a reference to render your own height, like this:
html, body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
height: 100%;
}
<html>
<head></head>
<body>
<aside>I'm at the right side</aside>
</body>
</html>
I'm building a simple website layout. I have a banner at the top, and a div boxe and an image underneath it, both floated to the left. I want to get the image of the woman inline with the right side of the header banner. I've tried using margin, but it either makes it go off the page, or it doesn't quite line up.
Here's the CSS:
.topbanner {
width:100%;
background-color:black;
padding:1%;
margin-top:1%;
}
#nav {
text-align:center;
}
.leftcolumn {
width:40%;
height:230px;
background-color: grey;
border: solid red 3px;
margin-top:2%;
float:left;
}
.leftcolumn p {
color:white;
text-align:center;
padding:13%;
font-style:italic;
font-size:20px;
}
.woman {
width:55%;
height:230px;
border: solid black 3px;
margin-top:2%;
float:left;
margin-left:4%;
Here's a link to the codepen:
http://codepen.io/Pea92/pen/JdpoqN
Here, I edited the CSS for you.
.woman {
width: 55%;
height: 230px;
border: solid black 3px;
margin-top: 2%;
float: right;
margin-left: 3%;
}
You just need to float .woman (image) right and perhaps decrease the margin-left to 3%.
It seems like the width of the left column and the image should have added up to 99%, but it might have exceeded 100% due to the 3px borders given to the left column and image.
Just float the right column right
.rightcolumn {
width:55%;
height:230px;
border: solid black 3px;
margin-top:2%;
float:right;
margin-left:4%;
}
here add this (take the width out)
.topbanner {
background-color:black;
padding:1%;
margin-top:1%;
}
view my fiddle
I have read through countless threads on here and others, but have yet to find one that works for me. I am trying to get this darn div to center on the bottom of my page. It is kind of like a footer, but not exactly.
HTML :
<div id="menucontainer">
<div id="menu">
<ul>
<li><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></li>
<li>another big test</li>
</ul>
</div>
</div>
CSS :
#menucontainer{
position:fixed;
bottom:0;
}
#menu{
position:fixed;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
width:1218px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
This should be all you need:
#menucontainer {
position: fixed;
bottom: 0;
width: 100%; /* ADD - make sure this container spans the entire screen */
text-align: center; /* Align contents to the center */
}
#menu {
/* remove position: fixed */
display: inline-block;
margin: 0 auto; /* Centers the block */
text-align: left; /* Reset the text alignment */
... /* The rest stays the same */
}
<style>
#menucontainer{
position:absolute;
bottom: -420px;
height: 200px;
margin: 0 auto;
position: relative;
width:1218px;
}
#menu{
position: relative;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
</style
DEMO
I've made some fundamential changes.
Firstly, your #menucontainer. You don't need fixed position - we can use 'sticky footer' technique to make it allways be hitched to the bottom; as we know the width, margin: 0 auto; will help us center it horizontally.
#menucontainer{
position:relative;
width: 1218px;
height:200px;
margin: 0 auto;
}
Secondy, I've added some fake content (.fake-content div) to help you get the idea how this all will look on site.
I've also added clearfix method for proper height rendering of an elements with floated children. More info here (also easy to find anywhere else).
Sticky footer technique has been taken from CSS Tricks site
Any questions? Is that what you was looking for?
I have two menus floated to the left of a page.
I then have a div floated to the right with an auto height, that adjusts to the content on the page (results of the menu ).
In my example I will treat the ul's as divs since they are set to block elements anyway:
<body>
<div class="container">
<div class="div1_head"></div>
<div class="div1"></div>
<div class="div2_head"></div>
<div class="div2"></div>
<div class="div3_head"></div>
<div class="div3"></div>
</div>
</body>
Each of these elements has a separate div header that goes above them.
I cannot figure out the correct way (if there is one) to clear and float the divs, so that they will all be aligned in the correct row.
margin:0;
padding:0;
.container {
width:100%;
float:left;
height:500px;
background:#ebebeb;
}
.div1_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
margin: 24px 0 0 0;
}
.div1 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div2_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
clear:left;
margin: 24px 0 0 0;
}
.div2 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div3_head {
float:right;
background: #cfcfcf;
width:76%;
height:50px;
clear:none;
margin: 0 0 0 4%;
}
.div3 {
float:right;
background: #dedede;
width:76%;
height:200px;
clear:none;
margin: 0 0 0 4%;
}
Do to the nature of the web application i'm using nesting the div and header into a larger container div isn't an option.
Here is a jsfiddle: http://jsfiddle.net/Kq49s/1/
Ok, if you don't want to add in new DIVs to your current app.
Try to change your div3's css like this...
Here is the demo on jsfiddle... http://jsfiddle.net/NTX6h/
.div3_head {
position:absolute;
top:24px; /* same as your .div1_head's margin top */
right:10px; /* if you want to add some right margin */
background: #cfcfcf;
width:76%;
height:50px;
}
.div3 {
position:absolute;
top:74px; /* .div3_head's margin top + .div3_head's height */
right:10px; /* if you want to add some right margin */
background: #dedede;
width:76%;
height:200px;
}
I need some help with this, i want to have a sidebar and a content div using bootstrap fluid layout but i cant make the sidebar to be scrollable and the content div not. I already tried using overflow:hidden; on body and applying overflow:auto on the sidebar div but it doesnt works, what am i missing?
Heres my scss code:
#main-container{
margin-left:0;
margin-top:60px;
padding:0px;
.span3{
background-color:white;
ul{
margin: 0;
li#song{
background-image: url($images+'chevron.png');
background-position: right center;
background-repeat: no-repeat;
background-color:white;
color: #666;
border-top: 1px solid #B4B4B4;
list-style-type: none;
padding: 10px 10px 10px 10px;
}
}
}
}
.maxheight{
height:100%;
}
.no-overflow{
overflow-y:hidden;
}
.scrollable{
height:100%;
overflow-x:hidden;
}
Here is the example code, the left div is what i want to scroll: http://jsfiddle.net/xYDRg/
You need to set height for that div:
#lista-canciones{
height: 350px;
}
http://jsfiddle.net/xYDRg/1/