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
Related
I have been developing a Kanban board for a generic system we maintain in work. I have the core functionality all working but am getting a little stuck on the styling. The following screenshot shows what I currently have:
There is a main DIV that contains all the 'columns/containers' and this is styled:
.kanban-board {
height: calc(100% - 60px);
width: calc(100% + 20px);
display: normal;
padding-bottom: 0px;
overflow-y: scroll;
}
This div contains a series of 'containers' - each grey column which is another DIV styled:
.kanban-container {
float: left;
clear: right;
margin: 20px 10px 0px 10px;
border-radius: 5px;
background-color: #eaebed;
width: 300px;
padding-bottom: 0px;
padding-left: 6px;
min-height: calc(50% - 20px);
display: table;
}
and to note - there could be any number of these 'containers' so they currently wrap to the next line as per the above screen shot. Each 'container' DIV contains an UnOrdered sortable List (UL) and this is styled:
.kanban-sortable {
list-style-type: none;
margin: 0;
padding: 2px;
min-height: 30px;
border-radius: 5px;
height: 100%;
width: 285px;
display: table-row;
}
If you look back to the screenshot, the last 'container' of the first row extends beyond the (min) height of the other containers... Seems okay until the longest is NOT the last in the row:
Now it just looks rubbish... And I have not a clue on how to get this sorted. I have checked some other Kanban examples and my other option is to just flow off page to the right with an X-Scroll bar - but my current spec requires me to fix this issue.
I hope I have supplied enough info for a quick fix.
BTW - im happy to address any other rookie mistakes I may have made from my example.
UPDATE
I have had tried the advice given to use display: inline-block;(in the .kanban-container) instead of:
float: left;
display: table;
And its difficult to see if it has fixed my issue as the auto-resize of the 'containers' height is no longer working
Since you are using floats, you'll need a container for each row that clears the previous one. Another way would be to remove the float, and set the .kanban-container to display: inline-block. If you need table properties in that, you'll have to add an inner container, but frankly I'm a little confused by all the styles used here and the !importants that go with them.
<div class="kanban-row">
<div class="kanban-container">
<div class="kanban-container">
...
</div>
<div class="kanban-row">
...
css:
.kanban-row {
clear: left;
overflow: hidden; // may not be necessary
}
.kanban-container {
float: left;
}
or (without rows):
.kanban-container {
display: inline-block;
}
I was working on a personal website for someone, and I came across an issue centering his portfolio section on his page. The concerned page can be viewed at http://websitetesting.pro/portfolio.html, my website for testing purposes. The portfolio images are under the "figure" tag, but the problem should be under the class "rowone", as that's the parent element to the figure images. Here's the code for row one.
.rowone {
height:240px;
margin-left: 25%;
margin-right: 25%;
line-height: 240px;
text-align: center;
margin: auto;
}
If not in there, the error should be somewhere in either the "main" css, or the "portfolio" css which refers directly to the portfolio page.
The .column class is a block element which it fills the whole page by width. When set to inline block it retains a certain width and it can be moved around.
.column {
display: inline-block;
}
or
hover01 {
display: inline-block;
}
options 2 is better. SO you wouldn't target a general class
.rowone {
height: 240px;
line-height: 240px;
text-align: center;
display: table;
margin: 0 auto;
}
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
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/