I am new to CSS and I am trying to make my first website as css but I am having a problem getting the two boxes to align side by side for the body and the four boxes above that don't stay next to each other. I have played around with Float and position with no luck.
You can see the site here: http://gdisinc.com/barker/default.php
I'm trying to get it to look like this: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Could you please tell me what I am doing wrong and how I can fix it? Thank you!
just updated your css with my css that will work perfectly there were few bugs you made so i sort it out those points so now its working fine updated your with mentioned below css :-
CSS
div#main {
margin: auto;
overflow: hidden;
width: 902px;
}
div#outerbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: left;
height: 300px;
width: 660px;
}
div#innerbox {
background-color: #4D1516;
border: 1px solid #000000;
height: 277px;
margin-left: 10px;
margin-top: 10px;
width: 640px;
}
div#sideouterbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: right;
height: 300px;
width: 222px;
}
First you're at the very limit in box width, try making it a bit smaller
after that use
display:inline-block;
if the sum of the boxes width fit in the container you should have no problem.
Hope this helps
Solution without floats and weird overflow:hidden statements, just standard positioning...
div#main {
margin: auto;
position: relative
width: 902px;
}
div#outerbox {
border: 2px solid white;
height: 300px;
width: 669px;
background-color: #A2282C;
position: absolute;
}
div#innerbox {
margin: 10px;
border: 1px solid black;
height: 277px;
background-color: #4D1516;
}
div#sideouterbox {
border: 2px solid white;
height: 300px;
width: 222px;
background-color: #A2282C;
position: absolute;
right: 0;
}
div#sideinnerbox {
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
height: 280px;
width: 198px;
background-color: #4D1516;
}
Just copy this over your styles and you should be fine.
Related
I created a drag and drop or sortable image using touch punch.. Everything works fine in chrome even in android. But it seems it is not working in Safari using iPhone..
https://jsfiddle.net/y05w1mog/
Might be an CSS issue.. Image should be draggable to one of the four options below.
td {
width: 200px;
vertical-align: top;
}
.box {
border: 2px inset #aaaaaa;
height: 240px;
overflow-x: hidden;
text-align: center;
padding: 10px;
overflow-y: auto;
}
.box img {
position: relative !important;
}
#div-images img {
height: 120px;
position: absolute;
top: 5px;
left: 0;
}
#div-images {
height: 100px;
width: 150px;
position: relative;
margin: 0 auto;
border: 3px double black;
padding: 5px;
}
th {
background-color: #538DD5;
color: white;
}
It turns out
containment: 'window',
from the touch punch is the one, not working in safari..
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I have the following code jsbin. Is it possible to have vertical scroll when messages overflow the wrapper? Thanks!
replace your css with this css demo
#wrapper {
position: relative;
height: 400px;
border: 1px solid #AAA;
margin-bottom: 20px;
}
#list {
position: absolute;
bottom: 0;
width: 100%;
max-height:100%;
overflow-y: auto;
}
.message {
background-color: orange;
padding: 10px;
border-bottom: 1px solid red;
}
I know this is probably very simple but I have tried using all position settings, float, and nesting. The top div varies in height due to dynamically created text and I need the div below it to be 20px below the top div. Any help is greatly appreciated.
I know I have the position as absolute but that is just to demonstrate kind of what I'm looking for.
#wrapper {
position:absolute;
width:341px;
height:371px;
z-index:1;
border: solid #777 1px;
}
#topbox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
border: solid #000 1px;
top: 7px;
}
#bottombox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
top: 136px;
border: solid #000 1px;
}
<div id="wrapper">
<div id="topbox">Top text box #1. The text is dynamically created here with a height that will vary. </div>
<div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>
Looking at the CSS you have, the problem is you are using absolute positioning. For a task like this you should use relative positioning. Here it is on jsFiddle to show you it in action & here is the CSS I adjusted to achieve that:
#wrapper
{
position: relative;
float: left;
display: inline;
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 7px 0 0 0;
border: solid #000 1px;
}
#bottombox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 20px 0 0 0;
border: solid #000 1px;
}
Here is how it renders in my local browser now:
I also looked over your CSS & combined/consolidated it since I find that repeating code can cause confusion when debugging items like this. Here is how I would code this:
#wrapper, #topbox, #bottombox
{
position: relative;
float: left;
display: inline;
}
#topbox, #bottombox
{
width: 280px;
z-index: 1;
padding: 30px;
border: solid #000 1px;
}
#wrapper
{
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }
To give #topBox a bottom margin you simply have to use:
#topBox {
margin-bottom: 20px;
}
The problem is that since you use position: absolute the elements jumps out of their normal flow and will no longer relate to each other.
here is a quick sketch of what I'm trying to accomplish. Nvm, I am not skilled enough to make this work in this box.
I have written some, I will make a jsfiddle with it,
here it is
I want the 3rd div to sit at the same height as the 1st one. Tried many things, including margin -percentages. Is there something I missed? I got it to sit at the height of the 2nd div pretty easily.
css:
#col11{
margin: 0;
float: top;
width: 50%;
height: 100;
border: 1px red solid;
}
#col12{
margin: 0;
float: left;
width: 50%;
height: 400;
border: 1px blue solid;
}
#col21{
margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500;
border: 1px pink solid;
}
Just change the order of the div and you are good to go
Demo
HTML
<div id="col11"></div>
<div id="col21"></div>
<div id="col12"></div>
And don't use float: top;, top is not a valid value, use left instead
CSS
#col11{
margin: 0;
width: 50%;
height: 200px;
border: 1px red solid;
float: left;
}
#col12{
margin: 0;
float: left;
width: 50%;
height: 300px;
border: 1px blue solid;
}
#col21{
margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500px;
border: 1px pink solid;
}