Here is my code.
I get a top space inside the left div above <h2>Nav</h2> and another on top of the right div above <h2>Title</h2> I am not sure why and these spaces are not wanted. Any help would be appreciated.
Thanks
HTML
<body>
<div id="leftSide" >
<h2>Nav</h2>
Internal Link
No Follow Link
New Window Link
</div>
<div id="rightSide" >
<h2>Title</h2>
</div>
</body>
CSS
body
{
width: 955px;
margin: 0 auto;
}
#leftSide
{
float: left;
padding-left:0px;
background-color: #D3D3D3;
width: 190px;
height: 579px;
border-right: 1px solid Black;
}
#rightSide
{
margin-left: 191px;
width: 764px;
height: 579px;
background-color: Green;
}
.txtLinks
{
padding-left: 35px;
padding-right: 25px;
}
Its just the default top/bottom margin that appears on all header elements - just add:
h2 {
margin: 0;
}
Consider using a reset in your stylesheet to remove all of the default UA styles
Related
I am having some trouble with my css, I have a content id and then inside that I have a class that is just padding. When inside the padding class, I have a textarea and a submit button. By default, the submit button is on the left:
But when I go to align the submit button to either the left or right of the content, it will go ther ebut it will also go outside of the content, like it's not part of it anymore:
These are my html and css codes
html:
<div id="content">
<div class="content-padding">
<textarea class="content-post" placeholder="Update your status..."></textarea>
<input type="submit" class="content-submit">
</div>
</div>
css:
#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: auto;
}
.content-padding {
padding: 10px;
}
.content-post {
width: 97.5%;
height: 80px;
border: 0px;
background: #fff;
resize: none;
padding: 10px;
outline: none;
margin-bottom: 5px;
border-radius: 4px;
}
.content-submit {
background: #005ddb;
width: 70px;
height: 30px;
border: 0px;
border-radius: 4px;
color: #fff;
outline: none;
cursor: pointer;
float: right;
}
I hope someone cal help me fix this as soon as possible, thanks!
You need to trigger the layout of .content-padding or add a clearing element.
.content-padding {
padding: 10px;
overflow:hidden ; /* minds inside and outside floatting elements, fine if no size given */
}
or a generated clearing element.
.content-padding:after {
content:'';
display:block; /* or whatever else than inline */
clear:both;
}
Learn more about floatting elements : http://css-tricks.com/all-about-floats/
add overflow: auto under #content in your CSS.
Another option would be to add another div in your markup right after the submit button.
<div class="clear"></div>
In your CSS you would then add the following.
.clear{
clear: both;
}
fiddle
You can create a div with clear:both style after the button:
<div id="content">
<div class="content-padding">
<textarea class="content-post" placeholder="Update your status..."></textarea>
<input type="submit" class="content-submit">
<div style="clear:both"></div>
</div>
</div>
The float attribute makes the height of element zero, then the parent div do not recognize the height of element.
Try this:
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
From http://css-tricks.com/snippets/css/clear-fix/.
The problem arises because you do not have a static height set for #content. If you set a static height for content ( padding + textArea + submitButton ) and set that as the height for #content, then it will look allow the room for everything.
#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: 140px; //Play with this number to get it perfect.
}
Here's a JSfiddle of my problem https://jsfiddle.net/d20fo54o/
The space below the h3 tag will not go away. I've tried making padding 0, margin 0, and looking it up.
It's not the div under it either, because if you delete the other div and replace it with anything else the space is still there.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
Adding h3, p { margin: 0 }. Working just fine, see fiddle
https://jsfiddle.net/d20fo54o/1/
add margin:0; for both p and h3
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
h3, p{
margin:0;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
In chrome dev tools you can see how margins (the peach coloured bits) affect the overall page.
In this picture, we can see h3#title has a margin-bottom (because it's a margin at the bottom) that is going over the blue bit, so we can say.
h3#title {
margin-bottom: 0px;
}
That will remove the bit below the title Hello, but there is another margin (margin-top this time, because it's a margin on top) that looks to affect that area, this time it's p that is causing the issue so again we can do something like.
p {
margin-top: 0px;
}
Putting it all together
Now let's put these little bits of code we've worked out into your CSS.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
/* our new code */
h3#title {
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
And there we go, the pesky margins are gone and so is the extra spacing.
Hope this helps.
How can I get rid of the excess space on the right side of the browser window?
In the picture below, Firebug has highlighted my #menuDiv div and the white portion on the right is not part of the border for that element. So where is it coming from? Perhaps the body?
When I look at the body element the same way, Firebug shows that it does indeed compass the extra space on the right. But it also shows that body has margins and padding of 0! What's going on here? And how can I fix it so that the page is centered?
(Btw, there is some empty space at the top because I've set body's height to 98% of the html for height sizing reasons.)
Demo
http://tuningcode.com/practice/2014-4-24-01.html.
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Math Browser</title>
<style>
html {
font-family: "Cambria", "Arial", "Helvetica", sans-serif;
}
html, body {
height: 100%;
}
body {
height: 98%;
}
* {
padding: 0;
margin: 0;
}
.info-pane .section p {
margin-top: 1em;
margin-bottom: 1em;
}
div {
padding: 5px;
outline: none;
}
#browserDiv, #infoDiv {
overflow: auto;
max-height: 600px;
}
#browserDiv, #infoDiv {
float: left;
margin: 1%;
height: 85%;
}
#browserDiv {
width: 46%;
border: 1px solid black;
}
#infoDiv {
width: 46%;
border: 1px solid #47d;
}
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
#menuDiv h2.innerDiv {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="menuDiv"><h2 class="innerDiv">Math Browser</h2></div>
<div id="browserDiv"></div>
<div id="infoDiv"></div>
</body>
</html>
in css, width by default does not include padding or border, so two divs with width 48% and 1% margin will fit the width of their parent. the moment you add any padding or border, the combined width of your inner divs will be greater than 100%.
You can do two things:
1) set the box-sizing property of css, keeping in mind that there are some compatibility issues
#browserDiv, #infoDiv {
box-sixing: border-box;
}
2) set the width/margin of a wrapper div, and use an inner div to set the padding/border.
<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>
.wrapper {
width: 48%;
margin: 0 1%;
}
#browserDiv, #infoDiv {
padding: 5px;
}
#browserDiv {
border: 1px solid blue;
}
#infoDiv {
border: 1px solid red;
}
I'm a bit of a dinosaur, so I tend to use the latter.
I pasted your sample into JSFiddle. It looks like at least part of the problem is this:
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
The width: 95%; isn't working out quite right. Simply removing this seemed to do the trick.
your culprit:
#menuDiv {
width: 95%;
}
using display:block magic (default for all <div>'s), you don't need to set width to get full width
I'm having problems making my site look good in Firefox. I have a div and then two divs inside the first one and I want the two that are inside two be side by side. This is the HTML:
<div class="gluggi3">
<h2 class="aust">Veðurspá</h2>
<div class="vedurspa">Some content</div>
<div id="map-canvas">More content</div>
</div>
and then the CSS:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border: solid;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
display: block;
width: 50%;
float: left;
padding-right: 50px;
}
#map-canvas {
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
display: block;
}
This code works fine in Chrome but not in Firefox, in Firefox the div with the class 'vedurspa' dissappears. I tried using inline, inline-block and initialising left like suggested in other questions, but still no luck. Can anyone tell me how I can make them stay side by side in Firefox? Thanks in advance!
you have a padding-right: 50px; on .vedurspa, therefor they are not side by side, removing that would solve your problem
It's not a FireFox issue. When the viewport is to narrow, #map-canvas will start wrapping.
Consider this:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
width: 50%;
padding-right: 50px;
float: left;
}
#map-canvas {
height: 300px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
}
Fiddle: http://jsfiddle.net/vUvhq/
Also, remove your comma in the first .gluggi3 class
.gluggi3,{}
to
.gluggi3{}
I'm assuming you added the padding-right to .verdurspa so there would be space between the blocks.
Try adding float: right; to #map-canvas
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example