So I am creating a responsive website using HTML and CSS, and I have created four div elements in a container width of 50%, each of these elements are 25% width and 25% height. Making a square. Next to these four div's is another div, 50% in width. When I try to get the two containers to go side side, they appear incorrect. The image below will demonstrate this clearly.
What I am trying to achieve.
Any help would be greatly appreciated!
HTML Code
<div id="tile-1-small-left-1">
</div>
<div id="tile-1-small-left-2">
</div>
<div id="tile-1-small-left-3">
</div>
<div id="tile-1-small-left-4">
</div>
<div id="tile-1-small-right">
</div>
The CSS code:
#tile-1-small-left-1 {
width: 25%;
height: 25%;
background-color: red;
display: block;
float: left;
}
#tile-1-small-left-2 {
width: 25%;
height: 25%;
background-color: green;
display: block;
float: left;
}
#tile-1-small-left-3 {
width: 25%;
height: 25%;
background-color: yellow;
display: block;
float: left;
clear: left;
}
#tile-1-small-left-4 {
width: 25%;
height: 25%;
background-color: blue;
display: block;
float: left;
}
#tile-1-small-right{
/*background-image: url(../img/hero_rotation.jpg);*/
background-color: purple;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 50%;
float: right;
height: 45%;
}
Fiddle demo
As I mentioned, this usually calls for another level of structure. This would do, based on your original CSS:
html,
body {
height: 100%;
}
#tile-1-small-left-1 {
width: 50%;
height: 50%;
background-color: red;
display: block;
float: left;
}
#tile-1-small-left-2 {
width: 50%;
height: 50%;
background-color: green;
display: block;
float: left;
}
#tile-1-small-left-3 {
width: 50%;
height: 50%;
background-color: yellow;
display: block;
float: left;
clear: left;
}
#tile-1-small-left-4 {
width: 50%;
height: 50%;
background-color: blue;
display: block;
float: left;
}
.tile-1-small-right {
/*background-image: url(../img/hero_rotation.jpg);*/
background-color: purple;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 50%;
float: right;
height: 45%;
}
<div class="tile-1-small-right">
</div>
<div class="tile-1-small-right">
<div id="tile-1-small-left-1">
</div>
<div id="tile-1-small-left-2">
</div>
<div id="tile-1-small-left-3">
</div>
<div id="tile-1-small-left-4">
</div>
</div>
What I've done is wrapped the four smaller elements in another instance of the larger element (which required changing your selector to a class rather than an ID).
This case also demonstrates why ID-based selectors are a bad idea, and why semantic class names should be used. Calling something -left becomes confusing as soon as that type of element gets used elsewhere in the page.
For the first image example, just add <div style="clear:both"></div>
<div id="tile-1-small-left-4"></div>
<div style="clear:both"></div>
<div id="tile-1-small-right"></div>
Related
I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
I am trying to add padding to my .slotIcon class. My .slots class is the container, witch is inline-block with another div, trying to make both divs side by side (50% width).
This is all under the "work" section.
Now padding doesn't affect the icons, and margins move the entire .slots div.
All I want to do is slightly lower the icon and text, in the .slots div.
https://jsfiddle.net/js1rgh4b/1/
<div class="work" >
<h2>Work</h2>
<div class="slots">
<div class="slotIcon"></div>
<p>Slots</p>
</div><div class="OEA">
<div class="OEAicon"></div>
<p>OEA</p>
</div>
</div>
Css:
.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
}
.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
}
.slotIcon {
width: 150px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}
.OEAicon {
width: 200px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}
https://jsfiddle.net/js1rgh4b/1/
Please Try This,
.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
padding-top:60px;
}
.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
padding-top:60px;
}
You can set padding to .slots and .OEA div ,this will make the text and the icon come down. And instead of display: inline-block , you can use float:left to make the div's align side by side.
DEMO
CSS:
.slots {
float:left;
width: 50%;
height: 350px;
background-color: #3484ce;
padding:60px;
}
.OEA {
float:left;
padding:60px;
width: 50%;
height: 350px;
background-color: green;
}
If you give a padding to .slots, it works. You would need to do the same for .OEAicon if you want them to be similar. If not, then do vertical-align: top; in .OEA.
A simple problem today but can't seem to find the solution. I have four divs - I would like #down to be placed directly below #up, but for the life of my can't figure it out. Here is my CSS and HTML.
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
Elements must remain floated left.
maybe try with an additional div to get both up and down together?
<div id="up_down">
<div id="up"></div>
<div id="down"></div></div>
<div id="mid"></div>
<div id="right"></div>
And you will changed your css to :
up_down{
width: 33.3%;
height: 200px;
}
#up {
width: 100%;
height: 50%;
background: #CCCCCC;
float: left;
}
#down {
width: 100%;
height: 50%;
background: #999999;
float: left;
}
Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically.
As #isherwoord says in the first comment, wrap div#up and div#down together in another div, forexample div#column
(I hope you don't mind the HAML way of writing HTML.)
div#column
div#up
div#down
div#middle
div#right
If you know the heights/widths you can just set the top position of #down with position:relative;top:-100px; to pull it back up.
Example:
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
position:relative;
top:-100px;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
So I have this html
<div class="app-wrapper">
<div class="search-form"/>
<div class="results">
<div class="tabs"/>
</div>
</div>
search-form has absolute positioning and is floated left. I want tabs to appear next to it, but at the top of the page. Note it doesn't have to be that tabs is always on the screen(fixed is not required).
Right now I have
.search-form {
position: absolute;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
position: fixed;
border-bottom: 1px solid #section-border;
width: 70%;
height: 3.0em;
float: right;
left: 31%;
background: #tabs-background;
}
But this doesn't work because on larger screens the distance between tabs and the search-form expands.
How do I get it so tabs is next to search-form, fills up the rest of the page, and that the distance between tabs and search-form does not depend on screen size?
So I just realized that tabs is inside of another div, with CSS
.results {
width: 70%;
}
Maybe this is what you are looking for: http://jsbin.com/ofagoq/11/edit
The CSS:
.search-form {
background-color: red;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
background-color: green;
width: 70%;
height: 3.0em;
}
This is an approach using % for your widths only. You could set max and min widths as well in %. http://jsbin.com/upucob/1/
.app-wrapper {
width:90%;
float:left;
margin:1em 3%;
padding: 1em 2%;
background: #CCC;
}
.search-form {
width: 30%;
min-height: 600px;
float: left;
background:#999;
}
.tabs {
width: 70%;
height: 3.0em;
float: left;
border-bottom: 1px solid #000;
background:#888;
}
<div class="app-wrapper">
<p>This is the outter container</p>
<div class="search-form">
<h3>Form goes here</h3>
</div>
<div class="tabs">
<h3>Tabs</h3>
</div>
<div class="results">
<h3>The Results</h3>
</div>
</div>
I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}