I have a question regarding divs and floats. I have searched a lot but can't seem to find anything that will fix my problem/work.
I am making a website and have two in-line divs: a description and a hours box. They are both set under a slideshow div and all three are set inside an outline/container. I'm trying to make it work for multiple window sizes, but whenever the outline div hits the bottom of either the hour or the description divs, they seem to float outside.
I'm kind of bad at explaining things so you can just look at bit of code:
div#outline{
clear: both;
height: 100%;
min-height: 100%;
width: 1000px;
margin: 0 auto;
background-color: white;
border: 5px solid white;
box-shadow: 0px 0px 17px #000000;
}
div#slideshow{
width: 50%;
min-width:700px;
height: 530px;
position: relative;
margin:0 auto;
margin-top: 30px;
}
#description{
width: 600px;
position: relative;
float: left;
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
}
#hours{
position: relative;
border: 5px solid green;
background-image: url("#");
height: 270px;
width: 220px;
box-shadow: 0px 0px 17px #000000;
float: left;
margin-right: 5px;
margin-top: 50px;
}
The full thing can be seen here: http://jsfiddle.net/wfq0kg0L/
Any help is appreciated! Thanks!
Im not sure if I understand the problem but I think it may come from usingheight: 100%; from the html tag down. I dont recommend doing this at all. It can be very annoying. Be responsive only using width or using media queries to set a proper height.
Also you should use overflow:hidden;on the outline div to not showing content outside of its boundaries.
I'm not understanding your problem..Looks like everything is working fine to me..All I can guess is that you want the div#outline to not float outside of one of your div containers? I don't see it floating outside.
Here's a quick recommendation tho..You don't need to be calling div#outline just #outline will do just fine. Also why are you using all div id's? You can each div a class. IE..
HTML
<div class="outline">
<div class="slideshow"></div>
</div>
CSS
.slideshow{}
.outline{}
This will clean up your css.
Also Look into flex-box. It's much easier to do layout this way now and it's widely supported across browsers. No need to float anymore.
Why are't you using a simple grid framework that will def help you with this kind of thing.
I have a repo on github that you can learn about flex-box at.
Check it out. Hope this helps :)
Remove height:100% from .outline or make it min-height:100% instead of height:100%
After div id="hours" add
Related
here is my unfinished web design:
my web design
so as i said before i want to make the outer border little tighter. it's like i can make it tighter in the height by throwing them 's, but i can't really do it for the width so if you experience with that sort of thing please give me the write code to write i will appreciate that.
here is my html code if you wanted to help me out :
https://hastebin.com/emebozihez.xml
again thanks alot if you make it till here
Haven't you tried these ? doesn't it work the way you want it to ? Just added : margin: auto; width: 70%;
#example3 {
border: 3px solid black;
margin: auto;
width: 70%;
background: #FFFFFF;
background-size: 10px 10px;
background-position: 50% -15px;
}
What about setting the width as a percentage and centering it. Perhaps something like this:
#example3 {
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
}
So, I have an error. I was wondering if someone recognizes It.
div.top {
border-top: 100%;
background-color: black;
height: 50px;
width: 100%;
color: #333;
text-align: left;
line-height: 50px;
border: solid;
vertical-align: middle;
border-color: transparent;
border-width: 100%;
}
tried to fix the top left corner
Actually it is not easy to get like that, it looks like the parent element has a padding or maybe the child. I recommend you to start your projects using a normalize CSS code like this one:
https://necolas.github.io/normalize.css/
This normalization code will help you to "clear" a lot of the "weird" things that happens in our browsers.
UPDATE:
I did not see your code. Do not use with: 100% with border values because it will make your container "bigger" than 100%. Use display: block, and your border.
I've been learning HTML and CSS for around 2 months, but apparently I'm still a neophyte. I'm trying to create somewhat of a header nav bar here, but when ever I set the property display:inline, poof ! They disappear. I'm pretty sure this problem is rudimentary but any input you have helps.
div {
border-radius: 5px 55px 5px 55px;
}
#Header {
height: 50px;
width: 200px;
background-color: #f38630;
margin-bottom: 10px;
margin-top: 10px;
display: inline;
}
.Left {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.Right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#Footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
In nutshell, you should not be using display: inline for anything that is not intended to be a displayed inside a block of text.
This is a good site for learning layout basics: http://learnlayout.com
If you really want to learn this stuff though, this is the best place I know: https://dash.generalassemb.ly :)
Hope that helps. Let me know if you don’t feel I’ve answered your question.
I would not use display : inline -block for divs but apply it to the list items or a tags.
It has to do with the generation of containing blocks, whether or not your element is inline or block, also the type of positioning. An inline element without content will not show.
Here is the de facto resource for your problem:
de facto web standards
visual rendering
I wanted my left right content be centered after zooming in 500% plus on the web page, I have tried so many ways, but still don't have an answer can anyone give me a hand here please.
copy and paste to make a new webpage, you can't see if you paste on fiddle or codewall.
html:
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>
CSS:
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
img{
widht:100%;
height:100%;
}
h1{
text-align: center;
}
as you can see when it reach 500% (ctrl+mouse scroll), the left and right text is not in the center any more, because it push to left somehow.
can one help me make it? Thank for helping. I had tried the width:% also dont work, some one say it need to be done in #media.
This is a normal behavior...
Your two divs are positioned relatively next to each other. If they can't fit the one next to the other then the second one will reposition itself underneath the first one...
if you REALLY want to make it work on 500% zoom what you can do is:
Resize your divs (example)
Use % widths (example2)
Personally i would go with my second example. The choice though is yours (depending always on why you need to achieve this)
PS: % width was not working because you were using display:table; on the #outer div
This is not a problem or even a bug, it's just the normal behavior of the browser. It's just too much zoom to keep any consistency. I think 400% is the max in this case. If you try it in FireFox, you won't get this problem because it doesn't go till 500%.
It's pretty good to be concerned about zooming in a web page, but 500% is just too much to any page work fine.
I am having trouble for some reason with getting the bottom of my page to have some padding. I have a content box that goes to the end of the page and hits the bottom and doesn't look the greatest. I want to give some space from the bottom of the page to fix this issue, but it seems that margin-bottom isn't working as I expect it to? I have included the following code which should be everything that affects the content box. I have tried removing the margin:0 in the html/body (even though I kind of need that), but that doesn't seem to work either? I feel like I am missing something really obvious.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;}
#content {
position: absolute;
left: 50%;
margin-left: -368px;
top: 104px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
padding-bottom: 15px;
background-color: white;
border: 1px solid black;
width: 664px;
margin-bottom: 20px;}
Any help would be greatly appreciated :) Thanks!
Live link - http://quintinmarcus.com/portfolio/
Since content has position: absolute, its after margins do nothing, nor should it stretch the inner height of the body so that the body's padding-bottom does anything.
If you want to centre your layout, modify your current style for #content to the following:
CSS:
#content {
width:664px;
margin:104 auto 20px auto;
padding: 15px 35px;
background-color: white;
border: 1px solid black;
}
This will also enable you to give the margin at the bottom you want.