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;
}
Related
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
I need to show two <div>s next to each other and with different backgrounds.
Unfortunately, the background-color of the second <div> is ignored. I have read some posts and people suggest to add clear:both;. Unfortunately, it doesn't help. Is there any way how to get a background-color for .div2?
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
Ok think i understood your problem. You want the element's next to each other.
Here is a CSS for this:
.div1 {
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
/* div1 will follow this */
margin-top:10px;
/* width of div1 + it's paddings */
margin-left:397px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
And here is a demo: http://jsfiddle.net/rvuyH/2/
just add float:left for div2 css like below to display both divs next to each other with background color
.div2{margin-top:10px;width:374px;float:left;background:green;padding:0 10px 10px 0;}
I have just changed the code given by #user3401335
JS FIDDLE DEMO. Please check it out
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:50%;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:45%;
background:red;
padding:0 10px 10px 0;
float:left;
}
What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!
HTML:
<div class="filters">
<span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
<span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
<span style="background-image:url(images/filters/contrast.jpg)">Contrast</span>
<span style="background-image:url(images/filters/brightness.jpg)">Brightness</span>
<span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
you have to change your code in the following way,
.filters {
position:relative;
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.
.filters span {
position:absolute;
left: 0px;
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
I have added position:relative; on filter box,
and position: absolute; and left: 0px;
Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.
SEE JSFIDDLE EXAMPLE
.container {
width:300px;
height:8em;
overflow-x:scroll;
overflow-y:hidden;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:1000px;
border-radius:0px 0px 15px 15px;
}
<div class="container">
<div class="filters">
...
</div>
</div>
Edit: Solution
Here is you fiddle working: Working jsFiddle here
Original Answer
Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.
HTML:
<div class="filters">
<span>Grayscale</span><!--
--><span>Smooth</span><!--
--><span>Contrast</span><!--
--><span>Brightness</span><!--
--><span>Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
white-space: nowrap; /* added */
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
/*float:left; removed*/
}
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?
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