I'm having some trouble with some basic HTML/CSS and would like to know what I'm doing wrong or if there is a smarter way to do things?
I'm basically wanting to create a simple UI and have created this but it doesn't seem to work quite right. Box4 or 6 seem to be misbehaving when I resize the browser window:
<style type="text/css">
.box1
{
width:100%;
height:25%;
background-color:#eee;
}
.box2
{
width:60%;
height:56%;
background-color:#eee;
float:left;
margin-top:1%;
}
.box3
{
width:39%;
height:40%;
background-color:#eee;
margin-left:61%;
margin-top:1%;
}
.box4
{
width:39%;
height:14%;
background-color:#eee;
margin-left:61%;
margin-top:1%;
}
.box5
{
width:50%;
height:14%;
background-color:#eee;
float:left;
margin-top:1%;
}
.box6
{
width:49%;
height:14%;
background-color:#eee;
margin-left:51%;
margin-top:1%;
}
html,body{
height:100%;
//width:100%;
}
</style>
<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>
Edited - added screen grab of what I see when resizing the browser window.
Attached Image
Any help please guys, much appreciated.
Slash.
Try this
html,body{height:100%;}
.box1{width:100%;height:25%;background-color:#eee;}
.box2{width:60%;height:56%;background-color:#eee;}
.box3{width:39%;height:40%;background-color:#eee;}
.box4{width:39%;height:15.5%;background-color:#eee;}
.box5{width:50%;height:14%;background-color:#eee;}
.box6{width:49%;height:14%;background-color:#eee;}
body > div {
float: left;
vertical-align: top;
margin: 3px 0 0 3px;
}
<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>
Seems to be working alright here. Perhaps you could be more clear about the problem?
html,body{height:100%;/*width:100%;*/}
.box1{width:100%;height:25%;background-color:#eee;}
.box2{width:60%;height:56%;background-color:#eee;float:left;margin-top:1%;}
.box3{width:39%;height:40%;background-color:#eee;margin-left:61%;margin-top:1%;}
.box4{width:39%;height:14%;background-color:#eee;margin-left:61%;margin-top:1%;}
.box5{width:50%;height:14%;background-color:#eee;float:left;margin-top:1%;}
.box6{width:49%;height:14%;background-color:#eee;margin-left:51%;margin-top:1%;}
<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>
Have you checked the total sum of the height %? It seems that box 2 has a height of 56% but box 3 and box 4 have a total of 55% (including the margin of 1%).
Related
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%.
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table).
But resize it in firefox and it will have this unexpected behavior.
Maybe I'm wrong and I'm taking good part of a chrome's bug.
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.
Thanks.
I made it work on both firefox, chrome.
Don't use display: table for this, not necessary
You had the id "first" two times.
You don't need divs inside divs
Use 'calc' it's a life saver.
http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
Currently I have a row containing several divs. I'm trying to prevent the contained divs from wrapping. I also do not want a scrollbar. I've tried overflow hidden and set a width on the row.
EDIT: Constraints dictate that this must be done without tables, javascript, or external libraries.
Is there a way to do this with css without resorting to tables?
JSFiddle: http://jsfiddle.net/ozsumdfb/
HTML:
<div class="row">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
CSS:
.square {
width:100px;
height:100px;
float:left;
margin-left:3px;
background-color: #6C6;
}
.row {
width:500px;
overflow:hidden;
}
insteed of float:left you could try display:inline-block then just add:
.row {white-space:nowrap; }
is this what you are looking for?
fiddle
Try this, I added a wrapper after row had them both with 618px since you had 6 squares padding left 3px (that is (100 + 3)*6 = 618). Hope this helps.
HTML
<div class="row">
<div class="wrapper">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
</div>
CSS
.square {
width:100px;
height:100px;
float:left;
margin-left:3px;
background-color: #6C6;
}
.row {
width:618px;
overflow-x:auto;
overflow-y:hidden;
}
.wrapper {
width: 618px;
}
I'm trying to make something like this. Any help will be greatly appreciated.
(can't paste the image due to 2 missing points of reputation ;) ) http://i.stack.imgur.com/p7xhr.jpg
I'm sorry I've given an impression like I don't know what I'm doing at all and I want someone else to do my work for me. I did try various solutions none of which seems to work.
on jfsfiddle it seems to work, but when I check on the actual site the top right image gets moved to another row
http://jsfiddle.net/37GAn/1/
html
<div>
<div class="image">
<img src="image.jpg" width="98" height="203"/>
</div>
<div class="image">
<img src="image.jpg" width="85" height="203"/>
</div>
<div class="clear"></div>
</div>
<div>
<div class="image">
<img src="image.jpg" width="130" height="210"/>
</div>
<div class="image">
<img src="image.jpg" width="69" height="197"/>
</div>
<div class="clear"></div>
</div>
css
.image {
float: left;
width: 100px;
margin-top:50px;
margin-left:280px;
}
This is just to give you a round-about idea.
You'll need your HTML as such:
<div id="contentHolder">
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
</div>
and CSS as such:
* {
margin:0;
padding:0;
}
#contentHolder {
background-color:Gray;
height:100%;
padding:40px 10px;
}
.row {
height:250px;
width:100%;
margin-bottom:30px;
}
.row > div {
display:inline-block;
width:48%;
height:inherit;
vertical-align:top;
}
.image {
background:white url(http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png) no-repeat 0px 0px scroll;
height:160px;
width:70%;
margin:20px auto;
border-radius:10px;
}
.textHolder {
color:White;
width:50%;
height:20px;
margin:0 auto;
}
This should work for you. This may still need some work as I have not tried to make it inch-perfect. That I'll leave it to you!!! :)
You can see that here:http://jsfiddle.net/a7zLW/
Hope this helps!!!
How can i place text below three circles with responsive design in a one div. Sample image below.
The following should be a good starting point.
HTML
<div class="container">
<div class="circle-content">
<div class="circle"></div>
<p>Circle One</p>
</div>
<div class="circle-content">
<div class="circle"></div>
<p>Circle Two</p>
</div>
<div class="circle-content">
<div class="circle"></div>
<p>Circle Three</p>
</div>
</div>
CSS
.container {
width:100%;
}
.circle-content {
width:33%;
text-align:center;
float:left;
}
.circle {
display:inline-block;
width:60%;
padding-bottom:60%;
border-radius:60%;
border:15px solid #333;
}
.circle-content p {
font-size:16px;
color:#666;
}
I have a Parent Div chatRooms , inside it there's many chatRoom's, and the chatRoomName Div was made only for proper formatting.
My Intention is to make each chatRoom float:left; beside the previous chatRoom, then have an horizontal scroll bar in case the maximum width of all chatRoom's exceeds the width of the parent div chatRooms, and this is actually working but the exceeding chatRoom's are being placed on a second line, not beside the last chatRoom, I want them all to say on the same line, even if some of them can't be seen, but I will be able to see them when I scroll right.
<div id="chatRooms">
<div class="chatRoom">
<div class="chatRoomName">
IUL
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
</div>
CSS:
#chatRooms
{
border-style:solid;
border-width: 1px;
border-color: green;
overflow-x:scroll;
margin-top:5px;
height:30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.chatRoom
{
width:100px;
border-style:solid;
border-color:green;
margin-right:1px;
float:left;
cursor:pointer;
}
.chatRoomName:hover
{
color:chartreuse;
}
.chatRoomName
{
background-color:green;
border-style:solid;
border-color:green;
color:white;
}
Try using inline block instead off floating the elements and using white-space: nowrap;
see fiddle http://jsfiddle.net/AFGU4/
.chatRoom
{
width:100px;
border-style:solid;
border-color:green;
margin-right:1px;
display: inline-block;
cursor:pointer;
}
What is needed in this case is display: inline-block; instead of float: left;. By making your divs inline-block and adding white-space: nowrap; on their parent you'll be ensured that the divs will always be on a single line. Adding overflow-x: auto; will provide a horisontal scrolling if necessary.