I'm trying to get 2 divs to sit side by side, a div for an ad (skyscraper_ad), and a main black (smaller_main) but when I add a float the DIV will overlap another DIV, can somebody help?
My css:
#skyscraper_ad {
display: block;
width: 160px;
height: 600px;
padding: 5px;
margin-right: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:relative;
margin-bottom: 4px;
}
#smaller_main {
display: block;
width: 605px;
height: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:absolute;
padding: 5px;
float: right;
margin-bottom: 4px;
}
This should work:
#skyscraper_ad {
width: 160px;
height: 600px;
padding: 5px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
margin-bottom: 4px;
float:left;
}
#smaller_main {
width: 605px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
padding: 5px;
float: left;
margin-bottom: 4px;
}
I took out your references to margin, positioning, and display. (and a height:auto which was meaningless as far as i could see). The margin auto was meaningless, the positioning was probably causing overlap, and the display was redundant (divs are already block)
Related
I've an issue with my aside bar and the timestamp in my section.
<section>
<div class="thumbnail-title">
Sample
</div>
<div class="thumbnail-image"></div>
<div class="thumbnail-text">
<div class="thumbnail-timestamp">
02-11-2016 18:51 P.M.
</div>
Hello this is random text that I will test today to see if my sizing is correct.
ello this is random text that I will test today to see if my sizing is correct.
</div>
</section>
<aside>
Random Aside Text.
</aside>
If I add more sections, the aside bar sticks to the last section, where as I want it to stick from top downwards.
Also my timestamp is okay if one section exists but if more sections are added, timestamp get's pushed below the text.
Here is the CSS:
section,
aside
{
margin: 20px 20px 24px 0;
}
section
{
float: left;
width: 55%;
margin-left: 20px;
border: 3px solid black;
padding-bottom: 20px;
border-radius: 10px;
}
.thumbnail-title
{
border: 3px solid black;
border-top: none;
border-left: none;
border-right: none;
padding: 15px;
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
.thumbnail-image
{
float: left;
height: 200px;
width: 300px;
border: 3px solid black;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
}
.thumbnail-text
{
font-size: 18px;
text-align: left;
padding: 20px;
padding-left: 20px;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
}
.thumbnail-timestamp
{
border: 1px solid black;
text-align: right;
float: right;
width: 360px;
height: 10px;
padding: 2px;
font-size: 10px;
margin-bottom: 10px;
border-top: none;
border-left: none;
border-right: none;
}
aside
{
float: right;
width: 38%;
padding: 10px;
border: 3px solid black;
border-radius: 10px;
}
I want my page to look like this:
Idea
Be care with margin property. (I mean by that margin: 20px 20px 24px 0; is cool, but it's 'dangerous' when you want inline elements)
Set display: inline-block or play with flexbox (amazing things)
Set correct percentage for your width.
If you set a margin: 20px, it doesn't seem to be big, but in fact, it's huge (especially when you resizing, or when you want to set elements in same line.)
Is this something you want ? http://codepen.io/anon/pen/ZBrYde
I'm trying to place these two divs inline.
HTML
<div class="thisFlak">
</div>
<div class="thisFlakNotes">
</div>
CSS
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
}
I cannot mess with ".thisFlak" to much because it hold alot of other stuff.
FIDDLE
https://jsfiddle.net/xwzcbn6w/
DEMO
CSS
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
By Adding float:left / display:inline to both classes you can achieve it.
Here is the updated fiddle linkUpdated fiddle
display:inline-block; will allow you to keep the dimensions and put your divs on the same line. It will treat the divs like words in a sentence though so you will need to comment out any space between them and as they are different heights, you will need to add vertical alignment:
.thisFlak{
vertical-align:top;
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display:inline-block;
}
.thisFlakNotes{
vertical-align:top;
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display:inline-block;
}
<div class="thisFlak">
</div><!-- comment out this space
--><div class="thisFlakNotes">
</div>
Update
Also if you don't want the boxes to wrap when the page is too small for them to fit on one line, you will need to add white-space:nowrap to the parent (or make sure the width of the parent is wider than the two children)
What you're looking for is:
display: inline-block;
Your code:
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display: inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display: inline-block;
}
float...
https://jsfiddle.net/maky/xwzcbn6w/2/
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float: left;
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float: left;
}
just put display : inline-block or float : left to each div
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float : left;
display : inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float : left;
display : inline-block;
}
Have a couple of questions:
How can I do to have my request div and my Languages Div right to the bottom with the red line no matter the size of the divs above them.
How can I make the Name and Rating divs to be align vertically to the middle of the picture?
Here is my code, JSFiddle (https://jsfiddle.net/samuvk/jejjzjjq/1/) and the result
This is my desired result:
I would really appreciate any help.
#menucontainer {
border: 1px red solid;
overflow: auto;
}
.middledividermenu {
width: 39%;
float: left;
border: 1px green solid;
overflow: auto;
}
.pictureleft {
padding: 0.5em 0.5em 0.5em 0.5em;
width: 19%;
float: left;
border: 1px green solid;
overflow: auto;
}
.rightdivider {
width: 40%;
float: left;
border: 1px green solid;
overflow: auto;
}
.namemiddledivider {
width: 70%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 1.8em;
}
.description {
width: 99%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
color:grey;
}
.request {
width: 99%;
float: left;
border: 1px blue solid;
text-align: center;
}
.littlepicture {
width: 15%;
float: left;
border: 1px blue solid;
}
.languagecallout {
padding: 0em 0.5em 0em 0.5em;
width: 10%;
float: left;
border: 1px blue solid;
}
.name {
width: 20%;
float: left;
border:1px solid blue;
vertical-align: middle;
}
.rating {
width: 57%;
float: left;
border:1px solid blue;
height:50%;
}
.personrating {
width: 99%;
float: left;
border:1px solid yellow;
vertical-align: middle;
}
.languages {
width: 99%;
float: left;
border:1px solid blue;
}
I edited your fiddle https://jsfiddle.net/jejjzjjq/5/
Use position:relative and position:absolute
Even though your structure is a bit messy, I didn't take time to change it, i only added a few stuff. You really need to review your code entirely!
Does this help? It shows the effect of the spaces between the top divs and the bottom div in a container.
Other notes: I believe that the regular flow of content goes from the top to the bottom and if you want to put a specific piece of content on the bottom or take it out of the regular flow you can use position absolute.
vh is used in my code to get the height so it could fit into the window / view-port nicely.You could make the height to pixels or whatever.
*{
box-sizing:border-box;
}
.container{
height: 100vh;
border-bottom: 3px red solid;
position: relative;
}
.name, .rating, .language, .request{
width: 45%;
border:1px solid blue;
height: 20vh;
}
.name, .request{
float: left;
}
.rating, .language{
float: right;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="name">Name</div>
<div class="rating">Rating</div>
<div class="bottom">
<div class="request">Request</div>
<div class="language">Language</div>
</div>
</div>
I've the following divs in my document:
<div class="bill-header">
<div class="bill-header-info"><span>Bill No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Table No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Room No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Amount</span></div>
</div>
I'm using the following CSS to make them sit on one line:
.bill-header {
height: 30px;
background-color: darkgrey;
padding-left: 10px;
}
.bill-header-info {
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
}
How can I make them appear with same distance in between them?
Fiddle
Do you mean like this? http://jsfiddle.net/3Zv2y/2/
Make these changes:
.bill-header-info {
width:23%;
text-align:center;
}
Add margin: 0 5px in your .vline:
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
margin:0 5px;
}
This will give a margin of 5px in both left and right of your vline element.
JSFiddle
use width property in css for exapmle
.bill-header-info {width:22%;}
Updated Fiddle
As long as there are always four items in a row, you can use a "fixed" percentage value:
.bill-header {
height: 30px;
width: 100%;
background-color: darkgrey;
}
.bill-header-info {
float: left;
width: 24.6%;
text-align: center;
padding-top: 5px;
}
The important parts are the width and text-align properties in .bill-header-info
.bill-header-info {
text-align:center;
width:23%;
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top:3px;
margin: 0 5 3 3px;
border-left: 1px solid gray;
}
This is my website:
http://www.jrbaldwin.com
I'm having a problem of my left sidebar getting cutoff when the window is reduced past a certain width. I assume it's a simple CSS issue, but I am not sure.
remove Position fixed and negative margin
#sidebar {
border-bottom: 0 solid #E7E7E7;
border-right: 0 solid #E7E7E7;
color: #59454F;
float: left;
font-size: 13px;
width: 132px;
}
so you can use different way, replace these 3 Classes:
#header {
border-bottom: 0 solid #E7E7E7;
height: 65px;
margin-left: 135px;
margin-right: 20px;
}
#outer {
border-bottom: 0 solid #E7E7E7;
border-left: 0 solid #E7E7E7;
border-right: 0 solid #E7E7E7;
border-style: solid;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
width: 1055px;
}
#sidebar {
border-bottom: 0 solid #E7E7E7;
border-right: 0 solid #E7E7E7;
color: #59454F;
float: left;
font-size: 13px;
margin: 0 0 -1px;
overflow: hidden;
position: relative;
width: 132px;
}
There is a margin-left of -149px on the #sidebar. Setting this to 0px will fix your issue.