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
Related
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/
Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
i want to set .span4(image) and .span8(green box) to the bottom of .row (grey box)
.row should get the size automatic because .span8 has a random height.
what i want is this result:
what i get is this:
example 1
here is .span8 not on bottom of .row but .row has a automatic height
http://jsfiddle.net/39znd/
example 2
here is .span8 on bottom of .row but .span8 is not inside of .row as you can see on post 2 and 3
http://jsfiddle.net/HZu82/
on example 2 i added to .span8 blockquote -> position:absolute;
does anyone have a hint for me?
You can use display:table;on the wrapper and display:table-cell;, vertical-align:bottom;
for your issue see this demo :
FIDDLE
HTML :
<div id="container">
<div class="table">
<div class="row clearfix">
<div class="span4">
<img src="http://lorempixel.com/290/270/people/9/" />
</div>
<div class="span8_wrap">
<div class="span8">
<blockquote class="bubble1-left">
<p>This is a blockquote</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
CSS :
#container{
width:900px; /* TOTAL WIDTH */
margin:0 auto;
padding:0 40px;
position:relative
}
.table{
display:table;
}
.row{
display:table-row;
margin:0 0 20px 0;
min-height:270px;
background:grey;
}
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}
.clearfix{zoom:1}
.span4{
display:table-cell;
vertical-align:bottom;
width:300px; /* IMG BOX */
background:grey;
}
.span4 img{
display:block;
}
.span8_wrap{
display:table-cell;
vertical-align:bottom;
}
.span8{
padding-bottom:30px;
width:600px; /* TEXT BOX */
background:green;
}
blockquote{margin:0 0 30px 0}
blockquote p{margin:0;font-size:1.25em}
.bubble1-left{
position:relative;
padding:20px;
border:3px solid #000;
text-align:center;
color:#000;
background:#fff;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
To have empty space above the green div try next things:
Insert some div to this empty place and let the green div have something like 100px height, and the div above 100% height.
Use next styles for green div: position: absolute; left: 0px; bottom: 0px; right: 0px;
Is there a way to hide the overflow of a div "at the top" rather than "at the bottom"?
This jsFiddle illustrates what I mean. The enclosing div has overflow-y:hidden, but this hides the lower part of its content. I want to hide the upper part of it.
The obligatory source code (verbatim from the jsFiddle):
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
margin:20px auto 0;
overflow-y:hidden;
height:150px;
outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
color:white;
text-align:center;
padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}
<div id="centered">
<div id="top">
this div should be "overflowed away"
<em>at the top!</em>
</div>
<div id="bottom">
this content should show
</div>
</div>
See this FIDDLE, you need to wrap the content in an absolute positioned DIV with bottom set to 0, whilst the parent container is given a position of relative
HTML
<div id="centered">
<div id='content'>
<div id="top">this div should be "overflowed away" <em>at the top!</em>
</div>
<div id="bottom">this content should show</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
margin:0;
padding:0;
}
#centered {
margin:20px auto;
overflow-y:hidden;
height:150px;
border:5px solid green;
width:150px;
position:relative;
}
#content {
bottom:0px;
position:absolute;
}
#top {
min-height:120px;
background-color:red;
padding-top:50px;
}
#bottom {
background-color:#555;
padding:60px 10px 0 0;
}
#top, #bottom {
color:white;
text-align:center;
}
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}