I have a div containing position absolute and float left and right. Now i want to place an image below the first div.
Now the problem is the image overlapping below the first div. I want the image to display below first div without overlapping.
https://jsfiddle.net/jv7afgn1/
<div class="top">
<div class="left" align="center">
<p>Sell</p>
<p>Download App</p>
<p>24x7 Customer Care</p>
</div>
<div class="right" align="center">
<p>Track Order</p>
<p>Help</p>
<p>About</p>
<p>Contact</p>
</div>
</div>
<div class="clearfix"></div>
<div class="logo_menu">
<p><img src="assets/images/logo.png" alt="" title="" /></p>
</div>
.clearfix {
clear:both;
}
/* Top */
.top {
width:100%;
height:auto;
background:#E9E9E9;
position:absolute;
padding:10px;
}
.top .left {
float:left;
}
.top .left p {
display:inline-block;
margin:0 10px 0 10px;
font-size:12px;
}
.top .left p a {
text-decoration:none;
color:#B5B5B5;
}
.top .left p a:hover {
text-decoration:underline;
color:#FD6123;
}
.top .right {
float:right;
}
.top .right p {
display:inline-block;
margin:0 10px 0 10px;
font-size:12px;
}
.top .right p a {
text-decoration:none;
color:#B5B5B5;
}
.top .right p a:hover {
text-decoration:underline;
color:#FD6123;
}
/* Menu and Logo */
.logo_menu {
width:100%;
height:auto;
}
Do you even have to absolute position the logo?
An absolute positioned element is on "it's own layer" of the homepage,
so trying to clear floats wont work.
My clearfix usually looks like this:
.clearfix:after {
clear:both;
display:block;
content: "";
}
Fiddle: https://jsfiddle.net/jv7afgn1/4/
Add padding top value equal to height of your navigation bar fixed at the top
Demo
.logo_menu {
width:100%;
height:auto;
padding-top:30px;
}
Related
I'm trying to place submenu right below its's choosing option like this but when I set left and right attributes on 0
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:0;
right:0;
}
it has whole site's width. When I set them on auto it looks like this.
How do I place my submenu exactly below this div or, what would look even cooler, on it's right?
Code (whole JSFiddle in comments):
HTML:
<div id="sidebar">
<div class="sidebar_option">Strona główna</div>
<div class="sidebar_option">Galeria</div>
<div class="sidebar_option">Reżyserzy
<div class="sidebar_wrapper">
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="sidebar_option">Ulubione filmy</div>
<div class="sidebar_option">Seriale</div>
<div class="sidebar_option">Kontakt</div>
</div>
CSS:
.submenu
{
text-align:center;
border-bottom:dotted 2px black;
padding-top:10px;
padding-bottom:10px;
display:none;
font-size:13px;
}
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:auto;
right:auto;
}
.sidebar_option:hover div
{
display:block;
}
.sidebar_option:hover
{
background-color:lightgray;
cursor:pointer;
}
.sidebar_option
{
text-align:center;
margin:10px;
padding:10px;
border-bottom:dotted 2px black;
}
I think the key is you need to set the position of the sidebar_option to relative so that the submenu_wrapper will be position in relation to the sidebar instead of the window. Then some value for left and right for the submenu. It can be anything, but if you want it centered they need to be the same.
.sidebar_option {
position: relative;
}
.sidebar_wrapper {
position: absolute;
background-color:lightgray;
left: 5%;
right: 5%;
z-index: 2;
}
Here's the updated jfiddle: https://jsfiddle.net/8d3p50hy/13/
I am having extreme difficulty organizing two divs.
I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.
My problem is that my divs are behaving oddly.
I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.
Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.
HTML:
<div id='container'>
<div id='footer'>
<div id="errors">
<p>paragraph 1</p>
</div>
<div id="other">
<p>paragraph 2</p>
</div>
</div>
</div>
CSS:
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
}
JS FIDDLE which shows how my code is behaving oddly.
I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/
You must float the errors div to the left and the other div to right and you must clear after the container around them closes.
To understand why you need to clear I suggest you read this answer
Is this what You want :
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
}
<div id="container">
<div id='footer'>
<div id="errors">
<p>Paragraph 1</p>
</div>
<div id="other">
<p>Paragraph 2</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.
Try float and position attributes like this...
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
float:left;
position:absolute;
left:0px;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
position:absolute;
right:0px;
}
try this mate, is this what you want:
#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
https://jsfiddle.net/4vuywmn2/5/
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
The image shows what I want to accomplish:
Here is the code that I have:
http://jsfiddle.net/ZNtKj/202/
<div style="width: 200px" >
<div class="niveles-porcentaje">
<div class="alta" style="width: 40%"> <span class="porcentaje">40%</span></div>
</div>
And the style I am having trouble to fix:
div.niveles-porcentaje {
width:100%;
height:100%;
align-self:center;
text-align:center;
display:inline-table;
background-color:#D7D7D7;
}
div.alta {
display:inline-table; /*inside a table*/
line-height: 2em;
background-color: #06AC09;
height:100%;
float:left;
}
span.porcentaje{
text-align:center;
vertical-align:middle;
z-index:99;
}
The div will be inside a td.
You will have to make the text's parent full width. To do that, remove the back color and width definition from the .alta div, and create an inner absolute div to deal with the color fill, that won't interfeer with the text.
Also, remember to set the text span to display: block to be full width. Check here: http://jsfiddle.net/ZNtKj/209/
<div style="width: 200px" >
<div class="niveles-porcentaje">
<div class="alta">
<div class="fill" style="width: 40%"></div>
<span class="porcentaje">40%</span>
</div>
</div>
</div>
CSS:
div.niveles-porcentaje {
width:100%;
height:100%;
align-self:center;
text-align:center;
display:inline-table;
background-color:#D7D7D7;
}
div.alta {
display:inline-table; /*inside a table*/
line-height: 2em;
height:100%;
width: 100%;
position: relative;
}
div.alta .fill {
background-color: #06AC09;
height:100%;
position: absolute;
}
span.porcentaje{
text-align:center;
vertical-align:middle;
z-index:99;
position: relative;
display: block;
}
Here is the Fiddle with example. You can simply change the text div width to see the result.
div.niveles-porcentaje {
width:100%;
height:20px;
align-self:center;
text-align:center;
background-color:#D7D7D7;
position:relative;
}
div.alta {
line-height: 2em;
background-color: #06AC09;
height:20px;
float:left;
position:relative;
}
span.porcentaje{
position:absolute;
left:46%;
top:0;
}
Got problem with divs..
HTML
<div id="site-menu">menu1
<br>menu2
<br>menu3
<br>menu4
<br>menu5
<br>menu6
<br>
</div>
<div id="site-content">
<div class="site-content">
<div id="site-content-left">left</div>
<div id="site-content-right">right</div>
<div class="clear"></div>
</div>
</div>
CSS
.site-content {
background:pink;
}
#site-content {
background:red;
margin-left:250px;
}
#site-content-left {
background:orange;
float:left;
}
#site-content-right {
margin:5px 0 5px 0;
background:blue;
}
#site-menu {
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {
clear:both
}
There is gap after clear both. The gap is big as menu div height (there is something with menu div).. Any solution please?
jsFiddle.
There are basically two way you can avoid big gap..
1) Instead of clear:both use clear:right
OR
2) Define proper floats for parent and sub divs instead of using margin. Proper div structure won't give above gap..
below is the style for each divs.
.site-content{background:pink; width:100%; float:left}
#site-content{
background:red;
margin-left:250px;
}
#site-content-left{background:orange;float:left; width:5%; }
#site-content-right{margin:5px 0 5px 0;background:blue; float:right; display:block; width:95%}
#site-menu{
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {clear:both}
clear:both makes the element drop below any floated elements that precede it in the document.
Remove margin: left from #site-content
#site-content{
background:red;
}
check this fiddle