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)
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
The content in the p elements can be put in the div container with the following css codes.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<p>music mane: xxxxxxxx</p>
<p>author: yyyyyyyy</p>
<p>publication：20081001</p>
<p>language：english</p>
</div>
</div>
Now i replace the p elements with span elements.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<span>music mane: xxxxxxxx</span>
<span>author: yyyyyyyy</span>
<span>publication：20081001</span>
<span>language：english</span>
</div>
</div>
The displayed effect is as following.
All the contents in the span were out of the div container,not the same effect in the p elements,how to make all the contents in the span elements within the div container?
the reason your SPAN elements are being floated outside the div is because SPANs, by default, are displayed as inline elements. if you want to use the SPAN tags, rather than the P tags, and have them remain inside the DIV, simply use the following rule:
div.description span { display:block; }
This should fix the problem, though it might look a little needless to use this rule, rather than using a P tag. But, it's your website and your choice.
The reason it works in the first case and not the second is because <p> tags are display: block by default and <span> tags are display: inline by default. The block paragraph elements display one per line within their parent, and since their parent is floated, they only take up as much width as necessary.
But, with the inline span tags, they display side by side, taking up as much width as they can, causing their parent (the description div) to be wider than the space to the right of the image. So, the description div displays below the image.
To fix this, you can set display: block on the span elements. Like:
div.description span
{
display: block;
}
Here's a working demo: https://jsfiddle.net/uy8x9z4v/. However, since the <p> tags already have the block display feature you need, I would recommend using them instead of spans, unless you have a very good reason not to.
Some HTML tags have default CSS values. <span>has none, while <p> has the following:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
So your problem is that <span> does not have display: block;
I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:
The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.
Here is the html for this section of the page:
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
The css:
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:
This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.
There are two fixes:
Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
/*Just make font size as 0*/
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.
#james donnelly has already given you an accurate and concise explanation to the cause.
the following is my CSS code:
.portrait
{
width: 400px;
position: relative;
display: inline-block;
background-color: #4E5555;
}
.portrait img
{
width: 150px;
float: left;
padding-right: 20px;
}
.portrait h4
{
text-align: left;
margin: 0px 0px 0px 0px;
color: #fff;
}
And the following is my relevant html code:
<div class="portrait">
<img src="images\filmmakers\Aboui, Julian\JulianAboui-web.jpg">
<h4>Julian Aboui</h4>
</div>
<div class="portrait">
<img src="images\filmmakers\Alter, Aaron\AaronAlter-web.jpg">
<h4>Aaron Alter</h4>
</div>
<div class="portrait">
<img src="images\filmmakers\Abrahams, Pia\PiaAbrahams-web.jpg">
<h4>Pia Abrahams</h4>
<h4>STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF</h4>
</div>
<div class="portrait">
<img src="images\filmmakers\Asnani, Shailen\ShailenAsnani-web.jpg">
<h4>Shailen Asnani</h4>
</div>
My output is the following:
http://i.imgur.com/YRkJvmn.png
I think I know what the problem is, but I'm not sure how to fix it. The last container element (on the bottom right) is placed further down because it thinks it is under the text. Is that correct? I'm unsure how to fix that.
Any help is appreciated, thank you!
Divs are finicky. I would recommend using ul with display:block inline. Just look at the page source of a web site where you can see something like that working. A snippet from my css where it works (I have a div inside the li withe text and multiple images)
div.list_holder {margin-bottom: 10px; clear: both; font-style:normal;}
ul.user_list {display:block; margin: 0px auto;}
li.list_item {list-style: outside none none; margin-right: -100%;
position: relative; padding: 0px; clear: none;
margin-bottom: 10px !important;
border: 2px solid !important; min-height: 325px;
max-width: 206px; float: left; margin-right: -100%;
width: 23.5%;border-radius: 2px;}
Not sure but a simple solution would be to display it as a table
.row {
display:table-row;
}
.portrait
{
width: 400px;
position: relative;
display: table-cell;
background-color: #4E5555;
}
.portrait img
{
width: 150px;
float: left;
padding-right: 20px;
}
.portrait h4
{
text-align: left;
margin: 0px 0px 0px 0px;
color: #fff;
}
And wrap the two rows you want in <div class='row'>
In my opinion for positioning these kind of containers you don't need to sue postion: relative if you have a bigger contaner/wrapper, which wraps the portraits and it is positioned via margins. In that case you can use margin to position your container. Also It is a good idea to use figure tag for the images if you want to style them little bit better and make them display: block if you want the text to be under the image.
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