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
Related
I have been working on a website the last couple of days, and today I just ran into a problem when I wanted to move the navigation bar down from the top of the page. This have never been a problem for me, but I have read my code so many times by now, that I'm not able to find the mistake.
What I did was to add a margin-top: 50px; to my navigation div, but it then proceeds to create a white border above the parent div.
CSS
#section1 {
background-image: url("images/section1bg.jpg");
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#topnav {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
HTML
<div id="section1">
<div id="topnav">
Languages
Contact
</div>
... other content
</div>
The image below should show the issue.
http://i.stack.imgur.com/8e1mW.png
If anyone has an idea about what to do, I would love to hear from you.
Thank you :)
Change margin-top: 50px; to padding-top: 50px;
#topnav {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
Now define your #section1 id css overflow:hidden;
#section1 {
overflow: hidden;
}
Demo Fiddle
What color do you want the 'white' space you could create a div on top
<div style="background-color:#black;width:100%;height:50px"><div>
I'm almost sure this is going to be a clear: both answer, but the trouble I'm having is where to put it, or how to wrap my head around understanding it.
I have divs within divs, and this particular one (sectioncut) is taking into consideration the height of its cousin ul (subnav). I've tried encapsulating the ul in its own div, but I must not understand how position and clear works yet.
This is my first time posting on Stackoverflow, so any feedback is welcome =D
http://jsfiddle.net/JustJinxed/d62eLh4o/
HTML
<div id="pagecut">
<div id="pagebg">
<div id="nav">
<ul id="subnav">
<li>Home</li>
<li>About</li>
</ul>
<div id="sectioncut">
This is a test.
</div>
</div>
</div>
</div>
CSS:
body,html {
border: 0px;
margin: 0px;
height: 100%;
background-color: #2200FF;
}
#pagecut {
width: 95%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 0;
background-color: #2200FF;
outline-style: solid;
outline-color:#FF0004;
}
#pagebg {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background:url(Img/bg1.png);
background-size: 100% auto;
background-repeat:no-repeat;
}
#nav {
width: 98%;
height: 100%;
margin-right: auto;
margin-left: auto;
outline-style: solid;
outline-color:#00FF00;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav li {
display:inline;
background-color: #7DA5EB;
border-color: #7DA5EB;
color: #FFF;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-style: solid solid none;
padding-right: 7px;
padding-left: 7px;
margin-left: 2px;
margin-right: 2px;
font-size: x-large;
}
#sectioncut {
height: 100%;
background-color: #7DA5EB;
}
If I understand correctly, your problem is that #sectioncut is overflowing its container because it is taking the whole container's height and being pushed down by the other div (#subnav) inside the container.
If that's the problem and you want to fill only the space left by the subnav div, I think How can I make a DIV take up the rest of the height of a container div? will help you.
It's my first time answering aswell so I hope I did it right and this was helpful to you.
I have a strange behavior on my webpage layout.
When i add some more divs inside "sideBar" div, the central part of the webpage is pushed down. They are not related to the central part. They have borders and i see that they are far from 'main' div. Is there any way to prevent it or i should play with margins every time when i add a new div.
Here is my HTML code:
<div id="sideBarLeft">
<div id='article1'><h3>Article 1</h3><div> //Just added
<div id='article2'><h3>Article 2</h3><div> //Just added
<div id='article3'><h3>Article 3</h3><div> //Just added
<div id='article4'><h3>Article 4</h3><div> //Just added
</div>
CSS code:
#sideBarLeft {
position: fixed;
height: 800px;
width: 250px;
margin-top: 0px;
margin-left: 0px;
margin-right: 1px;
padding-top: 100px;
padding-left: 5px;
float: left;
word-wrap: break-word;
z-index: 1;
border: 1px solid #808080;
}
#article1 {
width: 200px;
border: 1px solid red;
}
Here is the central part:
#container{
margin: 0 auto;
margin-left: 256px;
max-width: 600px;
margin-top: 120px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
float: left;
width: 600px;
border: 1px dotted #808080;
}
Here is the wrapper:
#wrapper {
width: 1200px;
margin: 0 auto;
}
It is likely because you have something in the main div using clear:both;
Try changing it to clear:right; or remove it
This is driving me crazy. I am relatively new to this stuff so trying to figure this one out for the past hour. I'll be really thankful if someone can help me with this.
I have the following code:
<div class="middle_box">
<div class="box left">
Some large text
</div>
<div class="box right">
Some large text as well
</div>
</div>
CSS:
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
}
.box {
float: left;
font-size: 21px;
margin-right: 50px;
margin-top: 25px;
padding-top: 25px;
width: 390px;
}
As you can tell the width of the container is 960px. Now, I want to center the two .box elements within the 960px container and that's where I am lost.
What did I try?
I tried using margin: 0px auto; and I tried faking it by adding margin-left on both sides but it just didn't work. How can I achieve this?
You need to clear ".middle_box", as its children elements are floated.
.middle_box:before, .middle_box:after {
content: "";
display: table;
}
.middle_box:after { clear: both; }
should do the trick
best way to use this hack calls clearfix :
.middle_box:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
When you are using fixed widths anyway, 960px and 390px, why not set the margin as well? Easy to calculate, no need for advanced CSS "magic" here in such setup.
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
background-color: red;
}
.box {
float: left;
font-size: 21px;
margin-left: 60px; /* <--- */
margin-top: 25px;
padding-top: 25px;
width: 390px;
background-color: yellow;
}
Here's a Fiddle
HTML
With floating - different dimensions
<div class="middle_box">
<div class="box0 left">
Some large text
</div>
<div class="box0 right">
Some large text as well
</div>
</div>
Without floating - same dimensions
<div class="middle_box">
<div class="box1">
Some large text
</div>
<div class="box1">
Some large text as well
</div>
</div>
With clear - one on the top of another
<div class="middle_box">
<div class="box2 clear">
Some large text
</div>
<div class="box2 clear">
Some large text as well
</div>
</div>
CSS
.middle_box {
margin: 0 auto 10px;
width: 960px;
height: 260px;
text-align: center;
text-transform: uppercase;
border: 1px solid #333;
}
.box0 {
font-size: 21px;
padding-top: 25px;
height: 65px;
border: 1px solid #333;
}
.left {
float: left;
width: 585px;
margin: 24px 6px 0 24px;
}
.right {
float: right;
width: 300px;
margin: 24px 24px 0 6px;
}
.box1 {
float: left;
font-size: 21px;
margin-top: 25px;
margin-left: 25px; /* margin-left | calculate 960px - boxes width - borders */
padding-top: 25px;
height: 65px;
width: 438px;
border: 1px solid #333;
}
.box2 {
font-size: 21px;
margin: 25px auto 25px;
padding-top: 25px;
width: 442px;
height: 65px;
border: 1px solid #333;
}
.clear {
clear: both;
}
Centring floats is tough, but do you need to use float? Why not use:
display: inline-block
There are advantages/disadvantages to using both float and inline-block and both have their quirks but ultimately I find inline-block much more useful and easier to develop with. Here is a fiddle for the solution to your problem using inline-block
DEMO FIDDLE
Also a heads up about its white-space quirk if you do use it (but an easy one to fix):
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I see that when we use table + tr + td we never see inner elements outside of outer elements.
But in case of Divs it can be.
Now I see that my inner div is located outside of parent div.
How to control child divs? What is wrong in my html?
I mean I have next html and I see that child div is outside of the parent
<div id="page">
<div id="main">
<div id="djInfo">
</div>
<div id="footer">
</div>
</div>
</div>
#page
{
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
}
#main
{
padding: 0px 0px 0px 0px;
background-color: #0c1114;
margin-bottom: 30px;
_height: 1px; /*only IE6 applies CSS properties starting with an underscore */
text-align: center;
height: 100%;
position: relative;
}
#footer
{
color: #999;
padding: 0px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
background-image: url('img/BottomGradient.jpg');
background-repeat:repeat;
height: 160px;
width: 100%;
float: left;
}
#djInfo
{
float: left;
position: relative;
margin-left: 250px;
}
I kinda constructed what you posted and everything seems to work fine?
http://jsfiddle.net/XrDTe/
But please, double check your code, there are some redundancies in it.
(Why give something with 100% width margin-left/right: auto? Why all the float: left's and the position: relative's? Why the IE6 height of 1px? All of this is not necessary and may hinder you in writing decent, to-the-point CSS)