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.
Related
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
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 having a little issue here. This is my HTML.
<div class="one">
</div>
<div class="two">
<ul class="ulclass">
<li>DASDA</li>
<li>QWEQW</li>
</ul>
</div>
This is my CSS:
.one{
width: 100%;
height: 300px;
background-color: black;
}
.two{
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
}
.ulclass{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;
float: left;
}
My problem is that these divs are next to each other and not above the other.
It looks like this.
http://oi57.tinypic.com/2lm5e1i.jpg
I want the green one to be down the black one. I have tried a lot of things and I can't do it.
I forget, these divs are inside another DIV which is a container
here the css:
.rost{
height: 100%;
min-height: 300px;
background-color: #fff;
padding: 0px;
padding-left: 0px;
box-shadow: 0 0 28px rgba(0, 0, 0, .6);
display: flex;
display: -webkit-box;
}
Here is the JSFIDDLE: http://jsfiddle.net/aemgm73z/
try adding clear:both; to .two class
.two{
clear:both;
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
}
Remove display: -webkit-box and display: flex from your parent container.
As far as the second div goes it seems you've put the <li> elements within the <a> elements which is why they are spilling out of the divs. The child divs ARE in the parent divs but because you've enclosed the links the other way round the divs aren't expanding to wrap around them
You can see this point by assigning a fixed height, say 1000px to .lista div and upon inspection find that .rost does enclose both the divs.
Swapping the li and a tags should work for you.
Do you have any specific reason to include float: left into your css? After removing that, things are working as you expect.
.one{
width: 100%;
height: 300px;
background-color: black;
}
.two{
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
background-color: green;
}
.ulclass{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;
}
<div class="one">
</div>
<div class="two">
<ul class="ulclass">
<li>DASDA</li>
<li>QWEQW</li>
</ul>
</div>
Remove disply:block and margin-top:0px property from your style
Try adding display:block; to your .one style, this will make the green div bump down onto the next line.
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
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/