Sorry to ask for css help again but I really can't get this one. My issue is that a sub div goes outside of an upper div's region. I tried using:
display: inline-block;`
but that makes the outer div go crazy.
My Problem:
There is a div with the id of sidebar, which contains the left boxes. which is inside another div with the id of main.
html:
<div id="main">
<div id="sidebar">
<div id="box">
<h3>Recently Uploaded</h3>
<ul>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
</ul>
</div>
...
css:
#main
{
width: 80%;
height: 100%;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .4);
margin-left: auto;
margin-right: auto;
}
#sidebar
{
height: 100%;
width: 20%;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 60px;
}
#box
{
/* min-width: 12em; idk if I wanted this */
width: 100%;
background-color: #F8F8F8;
border: 1px solid #000;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#box p
{
padding: 10px;
}
#box h3
{
margin: 0;
margin-top: 5px;
padding-left: 10px;
border-bottom: 1px solid #000;
font-size: 12pt;
font-weight:bold;
}
#box ul
{
font-size: 10pt;
margin: 0;
padding: 0;
list-style: none;
}
#box ul li
{
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #000;
}
anything I can do? :(
A solution which should work cross-browser and have extremely good browser support would be to apply the following to your #main div:
#main{
...
overflow: hidden;
}
Using this will force any floated elements to be calculated into the container's height when drawing its background, borders, etc.
Try this :
display:table; /* TO our main ID */
try adding float: left; to #main
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 am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>
Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}
So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue
I have this code:
<div class="container" id="container">
<div class="content" id="content">
<div class='nav'>
<ul>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
<li><a href='#'>Four</a></li>
<li><a href='#'>Five</a></li>
</ul>
</div>
<div class='innercontent'>
test
</div>
</div>
</div>
With the following CSS:
.content {
background-color: blue;
height: 190px;
padding: 30px;
}
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
}
.nav a {
display: block;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav li {
list-style: none;
padding: 0px;
background-color: #369;
padding: 4px 5px;
margin: 8px; 0px;
border-radius: 15px;
text-align: center;
}
.nav ul {
background-color: yellow;
padding: 0px;
margin: 0px;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
Problem: The second div (innercontent)'s top should exactly line up with the first ul's top. What have I done wrong?
Two things and you're done:
add float:left; to .nav
change margin:20px; in .innercontent
so in the end it should look like
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
float:left;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
The float is necessary so .innercontent can float around .nav
Try setting the vertical-align:top; for the content. By default the vertical-align is set to baseline.
add float:left for both .nav and .innercontent
I see that you use top property for .innercontent but keep in mind that this properties are used only with positioned elements (relative,absolute,fixed)
I suggest you to read the following two articles to understand how position and float works:
CSS Floats 101 & CSS Positioning 101.
Demo: http://jsfiddle.net/GYPJH/
I cannot correctly position the div form in my layout.
By looking at my div placement and css below, does anyone have an idea what I could be doing wrong?
#floorplans {
float: left;
height: 165px;
width: 203px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
background: #FFFFFF url(https://lorempixel.com/320/170/) no-repeat;
padding-top: 14px;
padding-left: 20px;
display: block;
color: #000000;
line-height: 1.5em;
padding-right: 10px;
}
#development {
float: left;
height: 165px;
width: 204px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
background: #FFFFFF url(https://lorempixel.com/204/165/) no-repeat;
padding-top: 14px;
padding-left: 20px;
display: block;
color: #000000;
line-height: 1.5em;
padding-right: 10px;
}
#projects {
background: #FFFFFF url(https://lorempixel.com/153/127/) no-repeat;
height: 127px;
width: 153px;
text-align: left;
padding-left: 300px;
color: #333333;
padding-top: 25px;
display: block;
float: left;
position: relative;
line-height: 1.5em;
font-size: 10px;
padding-right: 15px;
clear: left;
}
#form {
background: #990000 url(https://lorempixel.com/450/309/) no-repeat;
float: left;
height: 309px;
width: 450px;
position: relative;
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
color: #FFFFFF;
}
<div id="wrapper">
<div id="logo"></div>
<div id="topnav"></div>
<div id="nav">
<ul>
<li>link</li>
<li>link2</li>
<li>link3</li>
<li id="last">link4</li>
</ul>
</div>
<div id="gallery"></div>
<div id="floorplans"></div>
<div id="development"></div>
<div id="projects"></div>
<div id="form">
<div>
</div>
<div id="footer"></div>
</div>
You'll notice the div form is dropping down. What should I do to get things to line up? Should I rework the placement of the divs?
The form div's top is in line with the top of the div that precedes it. The clear:left; on #projects moves #projects to the next line (good), along with the following content (bad). Try a negative top margin, or consider restructuring your HTML to put #form before #projects.
Adding the following should work:
#form {
margin-top:-180px;
}
#projects {
border-right: 1px solid #FFFFFF;
}
Because you have two blocks (FLOORPLANS and DEVELOPMENT INFO) each with a border, they're now too wide to sit next to the form block. Test this by removing one or both borders and seeing if the form then pops back up there.
Note, negative margin often has issues in IE6, be sure and check any solution against that.