I've just started learning html and css and I'm trying to create a simple static website. My problem is that I'm trying to make a div container(option2) scroll with css overflow:auto.
The thing is that there are inner divs that are misplaced, overlapping, etc. when overflow:auto is in effect. #box2 is a inner div of #option2. #box2text is inner div of #box2 div.
HTML
<div id="option2">
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
</div>
CSS
#option2 {
height:90%;
width:35%;
margin-left:0;
margin-right:5%;
margin-top:2%;
min-height:90%;
position:apsolute;
float:left;
text-align:center;
overflow:auto;
display:block;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
#box2 {
height:25%;
width:90%;
float:center;
text-align:center;
margin:0 auto;
margin-top:15px;
margin-bottom:5px;
bottom:0px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
img.pic1 {
float:left;
height:80px;
width: 80px;
margin-left:20px;
margin-top:20px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
#box2text {
float:right;
height:80%;
width:65%;
margin-right:1%;
margin-top:20px;
background-color:grey;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
The only things I can see that's a problem is that in the css for #option2, you have absolute spelled incorrectly and you are trying to use a float value of center. To center an element horizontally, use
margin-left: auto;
margin-right: auto
Also, an id should only be used once. While it usually doesn't affect how the browser renders the HTML, it is incorrect according to HTML standards. Having multiple elements with the same id can cause confusion in the browser, especially if you want to use JavaScript to manipulate those elements.
See this jsfiddle with absolute corrected: http://jsfiddle.net/qpkJV/1/
Related
My question is a little different from the following
CSS Float Logic.
My question is about the concept heightmore concret than that.
There are rules here
https://www.w3.org/TR/CSS22/visuren.html#float-rules
point8 A floating box must be placed as high as possible.
Point9 points out that a left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible and a higher position is preferred over one that is further to the left/right.
Now here is my example.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>
</div>
</body>
Here is what i got. There are conflicts with point8 and point9 in my example. How to explain the default behaviour of browser to parse the css?
Why can't got the result as below?
There is a confused concepts between me and Quentin Roy at least ,to check the discussion as below, what does A floating box must be placed as high as possible mean?
Especially the word high here?
In the opinion of Quentin Roy, box4 and box5 are equally high for my example.
In my opinion, box4 are highest ,box5 are lowest ,box3 just in the middle of them.
My fore-end experts please show your correct interpretations on my example here ,to end the disccusion.
1 What does high mean in A floating box must be placed as high as possible?
2 Which is the highest and which is the lowst among box3 and box4 and box5?
You answered it yourself:
A floating box must be placed as high as possible
and
a higher position is preferred over one that is further to the
left/right
This is exactly what is happening. The algorithm first try to find the highest free area where your div can fit, then put the div at the rightmost position (in the case of float: right). As a result, box6 is positioned a little bit less on the right so it can be higher.
If it is not what you want, one solution is to use an invisible "spacer" to fill the hole underneath box5.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6spacer{
width: 250px;
float:left;
box-sizing: border-box;
border-width: 5px;
border-style: solid;
border-color: lightgray;
color: lightgray;
height: 40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6spacer">spacer
</div>
<div class="box6">box6
</div>
</div>
</body>
Another solution is to make use of the fact that a float: left will never go on the right of a float: right and vice-versa. As a result, if you find a way to make box3 floating left instead of right, box6 won't go on his left and thus, will be on top of it.
This is not always possible but in this case, you can have box3 at the same position while floating left (instead of right) if you insert it after box4 and box5:
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:left;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box3">box3
</div>
<div class="box6">box6
</div>
</div>
</body>
I am trying to give magins to inline elements (image thumbnails for a photo gallery). But it seems margin-top is ignored for my elements.
Markup is
<div id="row1-left">
<div id="gallerypreview">
<img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg">
</div>
<div id="gallerythumbs">
<div id="gallerythumbsInner">
<div class="gallerythumb">
<img src="gallery/autumn1.jpg">
</div>
<div class="gallerythumb">
<img src="gallery/autumn2.jpg">
</div>
<div class="gallerythumb">
<img src="gallery/autumn3.jpg">
</div>
</div>
</div>
</div>
Style is:
#row1-left{
width: 460px;
height: 310px;
float: right;
margin: 15px 15px 0px;
}
#imggallery{
width:450px;
height:300px;
margin:5px;
}
#gallerypreview{
width:450px;
height:200px;
margin:2px 5px;
border-radius:20px;
background-color:#E7E7E7;
}
div#gallerypreview>img{
margin:1px 25px;
width:400px;
height:198px;
}
div#gallerythumbs{
margin:5px 5px;
width:450px;
height:90px;
background-color:#E7E7E7;
border-radius:5px;
}
#gallerythumbs .gallerythumb{
display:inline;
width:140px;
height:86px;
margin:5px 5px;
}
div.gallerythumb>img{
width:138px;
height:76px;
}
According to some old posts on SO, margin-top is not applied to inline non-replaced elements. My questions is if there is any hack to get this done, for example, for my inline image thumbnails that are to be space from their top parent element?
Inline elements and margins is a hot topic because of its unusual activity. Some people use padding to overcome this problem.
.....
Another way is to use display:table; instead of display:inline;
best way is to....
use css styling like this
div{
position:relative;
top:-2px;
}
this brings the div 2 pixels down.
display: inline; Do not respect top and bottom margins ...
I am playing around with using Divs and CSS instead of tables and I am having some problems with my code/CSS. I am trying to set this up so I have 3 columns next to eachother in a container that is centered to the page which has the text aligned to the bottom so the text is around the same height as the bottom of the image I am using in the center column. I have been unable to achieve this and I have a new found respect for UI guys. My code and CSS are as follows. Any guidance would be helpful :)
body {
}
#Container
{
border:1px solid #dddddd;
padding:40px 94px 40px 94px;
background:#ffffff;
width:55%;
height:auto;
border-radius:0px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#Address
{
border:1px solid #dddddd;
position:relative;
text-align:left;
width: 33%;
}
#Phone
{
border:1px solid #000000;
position:relative;
text-align:right;
width: 33%;
}
#Logo
{
border:1px solid #4cff00;
position:relative;
float: left;
width: 33%;
}
HTML
<div id="Container">
<div id="Address">123 Testing Street</div>
<div id="Phone">(ccc) 223-3323</div>
<div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
</div></blockquote>
see the fiddle here , This is not 100% everything you asked for, but it is a big start! You have the appearance of a table while only using div's. I am not going to finish every little detail for you, but this should get you going, it is almost complete.
#Container{
border:1px solid #dddddd;
padding:5px;
background:#bbb;
width:55%;
margin: 0px auto;
position:relative;
height:200px;
}
.cell{
display:inline-block;
width:32%;
height:100%;
border:1px solid #000;
position:relative;
vertical-align:bottom;
line-height:370px;}
<div id="Container">
<div id="Address" class="cell">123 Testing Street</div>
<div id="Phone" class="cell">(ccc) 223-3323</div>
<div id="Logo" class="cell">
<img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
</div>
</div>
I simplified your css a bit. See if this is what you're looking for.
#Container{
margin:0 auto;
width:500px;
background:gray;
}
#Address, #Phone, #Logo{
float:left;
width:33%;
height:256px;
line-height:512px;
}
http://jsfiddle.net/39M9L/1/
Part of the problem you're going to have with aligning to the image is there is white space around the logo, so to get the text to align to the edge of the logo, you're going to have to tweak the numbers a bit, rather than rely on the image height.
You can add a span within a div, and use margin-top to make it in the bottom of the div.
CSS:
#Container > div {
min-height: 52px;
float: left;
text-align: center;
}
#Container > div > span {
display: inline-block;
margin-top: 35px;
}
Take a look: [JSFIDDLE] (http://jsfiddle.net/blck/txXE2/)
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
I'm looking to render a multi-column CSS layout like the one pictured in the link below.
http://i.imgur.com/Fhdyi.png
Here's the kind of syntax I'm looking for...
<div class="container">
<div id="1">#1</div>
<div id="2">#2</div>
<div id="3">#3</div>
<!-- and so on... -->
</div>
What kind of CSS properties am I looking to apply to these numbered DIVs to get them displaying like this? Height of DIVs is variable but width is fixed.
Many Thanks!
How about separating divs in columns? Something like this:
.container #col1,#col2,#col3,#col4{
float:left;
}
.container #div1,#div2,#div3,#div4,#div5,#div6,#div7{
width:150px;
background:#000;
margin:0 20px 10px 0;
padding:10px;
color:#fff;
}
<div class="container">
<div id="col1">
<div id="div1">#1</div>
<div id="div2">#2</div>
</div>
<div id="col2">
<div id="div3">#3</div>
</div>
<div id="col3">
<div id="div4">#4</div>
<div id="div5">#5</div>
<div id="div6">#6</div>
</div>
<div id="col4">
<div id="div7">#7</div>
</div>
</div>
It can't be done well with just CSS, and only with CSS3.
To answer your question as posted, this is an example: http://sickdesigner.com/masonry-css-getting-awesome-with-css3/
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
<div>
Whatever stuff you want to put in here.
Whatever stuff you want to put in here.
Whatever stuff you want to put in here.
...and so on and so forth ad nauseum.
</div>
The issue with that is that if you have a lot of items, you'll see the first of each column at the top instead of the first three items.
The jQuery masonry plugin is a much better option for this kind of layout: http://masonry.desandro.com/
There's also a plain JS version, called "vanilla masonry"
http://vanilla-masonry.desandro.com/
That way your first items are on the top, it looks better in order.
This is not tested but could it be something like this you are looking for:
#1{
height:150px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#2{
height:200px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#3{
height:500px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
clear:both;
}
#4{
height:50px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#5{
height:100px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#6{
height:200px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#7{
height:500px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
clear:left;
}