I am working in a WordPress environment without access to the CSS :(.
I have 4 div boxes currently displaying side by side by using:
<style> .cells {
display: block;
float: left;
width: 33%;
}
.clearfix {
overflow: auto;
}
</style>
<section>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box one</h3>
</div>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box two</h3>
</div>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box three</h3>
</div>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box four</h3>
</div>
<div class="clearfix"></div>
</section>
the boxes display side by side just fine on the page but I need to get them to flow down the page on various mobile devices.
I am not sure how to do this, can someone please offer some advice?
Thanks
As another has said in a comment to your question, the question is a little vague and it is difficult to determine exactly what you are looking for. I think you mean that you want them to all have 100% width on mobile devices and stack one underneath the other as opposed to left to right. But, again, only on mobile devices.
Well, you would need to use a media query to set new behaviors for the divs only on mobile devices device's below a certain screen width (lets say 480 like a galaxy s4 or something and set aside the pixel ratio stuff)
#media screen and (max-width:480px){
.cells {
clear:both;
width:100%;
}
}
^ That should ensure each one takes up the full width and will not hang up on one another's edges but clear down to the next line.
I hope that gets you started with what you want to do.
Related
I'm trying to build a simple layout with a box inside another, however, while the external box has all four corners rounded, the inner one has only those of the right side.
I'll add the basic markup I started with just to fullfill the SO requirements but it's much easier to see everything in action:
<div id="wrapper">
<div id="left">
<div class="placeholder">Placeholder</div>
</div>
<div id="main"></div>
</div>
The inner corners are not exactly rounded and although I know that the reason is because I didn't define any other borders for that element, if I do, in the end, I can't have all border 6px thick in a smooth way (outer gets thickier on the left).
The closest approach I achieved was this one, making both left borders, external and internal, 3px to have the desired 6px but the area near the corners are clearly thinner, which is not what I had in mind.
As an extra, more as curiosity, when I tried to round the left inner borders as well, I ended up messing everything, with a space closer to ther cornerrs. Why is this?
Although I'm not the biggest fan of relative/absolute positioning, using them in this case seemed to be what I needed to solve the problem:
body {
background-color: #000;
margin: 35px 35px 35px 50px;
}
#wrapper {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border: 6px solid #0A1818;
margin-left: 20px;
min-height: 500px; /* demo only */
position: relative;
z-index: 1;
}
#left {
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: #051113;
border: 6px solid #0A1818;
left: 35px;
min-height: 500px; /* demo only */
position: absolute;
text-align: center;
width: 30%;
z-index: 2;
}
<div id="left">
<div class="placeholder">Placeholder</div>
</div>
<div id="wrapper">
<div id="main"></div>
</div>
I hope it helps someone in the future :)
First of, I know there are many similar questions to this, but none of the articles I have read has helped me. Somehow this won't work..
I want to make the area inside the class="downloadBoks" to be clickable, and not just the text within <a></a>. Not using JavaScript.
HTML:
<div class="sideboks">
<div class="downloadBoks">
Prosjektbeskrivelse
</div>
<div class="downloadBoks">
Statusrapport
</div>
</div>
CSS:
.downloadBoks {
height: 23px;
width: 150px;
font-size: 14px;
border-style: solid;
border-color: #000000;
border-width: 0px 0px 2px 0px;
margin-top: 0px;
margin-bottom:0px;
line-height: 25px;
vertical-align:middle;
box-shadow: inset 0px 0 2px 2px #777777;
}
div.sideboks{
width: 150px;
height: 50px;
margin-top: 150px;
margin-left: 54px;
position: fixed;
background-color: #B7AFA3;
border:solid;
border-width: 5px 0px 5px 5px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: inset 1px 0 0px 0px #777777;
}
This is the code I have so far. Right now the "downloadBoks" is purely looks.
edit: So I realised that having the div, within another div might have something to do with it? So updated with that code as well. Thanks for all the responses so far!
.downloadBoks a {
display: block;
height: 100%;
}
This will make the entire square clickable. DEMO
With HTML5, you can put blocks in a tags:
<a href="Prosjektplan.pdf">
<p class="downloadBoks">
Prosjektbeskrivelse
</p>
</a>
You need to make the <a> inside of the div's have 100% height and width. This way they take all the interior of the div and thus the div is "clickable":
.downloadBoks a
{
display:inline-block;
height:100%;
width:100%;
}
I have create this block:
and I would have two parts in this block, like this:
here is my block:
<div id="content_sc" >
<img src='images/paypal-donate.jpg'>
</div>
and the css:
#content_sc {
top: 15px;
background: #fff;
width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
I tried a lot of things, but without achieving what I wanted to do
Here you go:
http://jsfiddle.net/VALCw/
Just a case of floating your two elements left and putting overflow on the container really.
Hi I'm just wondering if anyone can help me out. I'm new enough to web design, and I'm having some problems with my CSS.
Basically I cant figure out how to correctly nest my divs/boxes without having overflow issues! I have tried using overflow: hidden; but this still hasn't worked, I've also tried floating the child elements either left or right to see if it would help but still no luck!
My css looks like this:
#customerReg {
width: 47%;
height: 480px;
float: left;
background: #FFF;
padding: 10px 10px 10px 10px;
display: inline;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#customerInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#participantReg {
width: 47%;
height: 480px;
float: right;
background: #FFF;
padding: 10px;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#participantInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
My HTML Is as follows:
<div class="contentbody" style="border:#FF0066 solid 2px;">
<div id="customerReg" style="border:#33CC00 solid 2px">
<div id="customerInfo">
<p>Customer Registration
</p>
</div>
<!-- End of customerReg --></div>
<div id="participantReg" style="border:#33CC00 solid 2px">
<div id="participantInfo">
<p>Participant Sign Up</p>
<p> </p>
</div>
<!-- End of participantReg --></div>
<!-- end .contentbody --></div>
What im aiming for is so have two rounded boxes side by side with two smaller boxes inside these boxes. I tried to post an image but it wouldnt let me! What im getting is that the two inner boxes are both spilling out on the right side of the outer boxes if that makes sense??
Can anyone tell me where im going wrong and what i can do to correct this as ive spent hours trying to find an answer and cant figure it out!
The parent div set:
overflow: hidden;
OR
#customerReg, #participantReg{
float:left;
}
.contentbody:after{
content: '.';
clear:both;
visibility: hidden;
*zoom:1;
height:0;
display:block;
}
if you set the width of the first div the boxes ar side by side:
look this fiddle
.contentbody{
width:990px;
border:#FF0066 solid 2px;
}
I have a web application and I am using the CSS display: table. I have a wrapper and this contains two columns called sbr and bdy. I've no problem getting this to look like a table BUT it seems like the contents of one table cell effect the other. I made a fiddle for this. Notice that the CCC doesn't appear at the top in the right hand cell. The position of the CCC depends on code in the left cell.
Fiddle example
Can anyone explain why this is. I would have thought each cell would be isolated from the others.
<div id="wrp">
<div id="row">
<div id="sbr">
<div class="sbr_bdy">
<h4>AAAA</h4>
</div>
</div>
<div id="bdy">CCC</div>
</div>
</div>
#wrp {
background-color: #FFFFFF;
border-radius: 5px 5px 5px 5px;
display: table;
padding: 5px;
width: 200px;
margin: 0 auto;
position: relative;
text-align: left;
top: 110px;
z-index: 3;
}
.sbr_bdy {
padding: 20px 10px;
border: 1px solid #CDCDCD;
border-radius: 5px 5px 5px 5px;
background-color: red;
}
#row { display: table-row; }
#sbr,
#bdy { display: table-cell; border: 1px solid black;}
#bdy {
vertical-align: top;
}
This will move CCC to the very top of the cell. Now you can use padding to get a little spacing :)
The current behaviour is btw how a table would behave