I have 2 divs floated left so they will appear inline
<div class==".container" style="width: 100%">
<div class="leftColumn" style="width: 50%; float:left">
test
</div>
<div class="rightColumn" style="width: 50%; float:left">
test
</div>
</div>
When the screen falls below 400px I want the divs to appear underneath each other
My current media query
#media(max-width: 400)
{
.leftColumn{background-color: Red; float: none}
.rightColumn{background-color: Blue; float: right}
}
Thanks to anyone who can help
You can have the same effect by
#media(max-width: 400) {
.leftColumn, .rightColumn{width:100%;}
}
Figured it out.
I had inline styling on the divs
<div class="leftColumn" style="width: 50%; float:left">
test
</div>
When i removed it, it all worked.
Yep, inline styling was buggering it up, plus you weren't defining your media queries 100% correctly, needed the px:
http://jsfiddle.net/XmqNy/
Related
It is my fault, I am trying to re-ask the question.
I have some code like this:
<style>
div {
float: left; width: 150px; padding: 10px;
margin: 10px; color: #fff;
}
</style>
<div style="background: #c33">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #3c3;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #33c;">
c<br>c<br>c<br>c<br>c<br>c<br>c
</div>
<div style="background: #399;">
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
</div>
<div style="background: #939;">
e<br>e
</div>
<div style="background: #993;">
f<br>f<br>f<br>f<br>f
</div>
<!--
... and so on ...
-->
when my visitor's screen has enough width, it is works fine like this.
when the screen become smaller, it still works fine at beginning.
but good time doesn't last long, when continually shrink screen size, it displayed like this.
some space appeared between c(the blue one) and e(the purple one).
then a(the red one) and f(the yellow one).
when shrink to 2 columns, a c and e are totally separated.
So, my question is, every my block have certain(fixed) width, uncertain(fluid) height, there is no max-width of this "block area" or say "the parent node of these blocks" or container whatever.
Can I just remove these unnecessary spaces using pure css way?
Hope this time I explained clearly, and thank you for reading my post.
You might try to left float only two, and float right the other:
.aaa,
.bbb,
.ccc {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.bbb {
float: right;
}
.aaa,
.ccc {
float: left;
}
<div class="aaa" style="background: #933">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="bbb" style="background: #393">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div class="ccc" style="background: #339">
c<br>c<br>c<br>c<br>c<br>c
</div>
Grid, flex... and even simply using floats and clears:
<style>
div {
width: 200px; padding: 10px;
margin: 20px; color: #fff;
}
</style>
<div style="background: #933; float: left;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393; float:right;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339; clear:left;">
c<br>c<br>c<br>c<br>c<br>c
</div>
To some extent you can do that, if you use left AND right floats as shown below and put a wrapper around it to let the right-floated elements not go too far right:
div {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.a {
float: left;
}
.b {
float: right;
}
.wrapper {
width: 520px;)
<div class="wrapper">
<div style="background: #933" class="a">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393" class="b">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339" class="a">
c<br>c<br>c<br>c<br>c<br>c
</div>
</div>
Like others have said, there are plenty ways of doing it, but I'd use flexbox.
Just wrap the two boxes on the left in a container div, and use display:flex on that container, and set the flex-direction property to column and they should stack on top of one another.
Here's a great website to pick up the basics - http://flexboxfroggy.com/
Oddly enough, the closest you could get is using damn CSS columns..
Yeah, that's right. I just said "CSS Columns"
Declaring an auto column layout using your divs width as column width, and making sure no div will wrap into multiple columns with break-inside: avoid; you can get pretty close.
body {
columns: 150px;
column-gap: 2em;
}
div {
break-inside: avoid;
}
https://jsfiddle.net/p0yLs5sh/1/
And yes, I know. I just said columns. Thought that would never be an answer.
I'd like to lay out HTML divs relative to one another, like Android's RelativeLayout.
Any idea how to achieve it? Thanks.
EDIT: The question is a general one but I see people request a specific example so here's the one from the link. You can simplify the example layout requirement to be: Blue square from start to finish. Below it two squares: Red and Yellow. Yellow to the right of red till the end. Below the yellow, a green square aligned to the right. Overall 4 divs, laid out relative to one another.
You can put divs on the same 'line' by using the display property in CSS.
Use
display: inline;
or
display: inline-block;
'inline-block' means your div can be given height and width properties while 'inline' will just be the size of your content. In this case, you'll probably want to use inline-block so you can line up your divs.
Found a way using float and clear:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100%; height: 50px; background-color: blue;"></div>
<div style="width: 60%; height: 50px; background-color: red; float: left"></div>
<div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
<div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>
You can play with the code here.
* The purpose of clear:left is to keep the green in the next line - even when the sizes of the red and yellow get changed to pixels instead of percentage.
Like Android, in HTML you cannot directly define Linear or Relative Layout. But through CSS you can define whatever design you want.
For example, in your question you have asked four inputs to align in a particular format.
You can wrap all inputs in a div, and make it align using float property.
The layout is here.
Edit: Here is the layout with .div2_2 in px value.
You can achieve this layout using the following html and css.
HTML
<div class="parent">
<div class="div1">
<input type="text" placeholder="Reminder Name"/>
</div>
<div class="div2">
<div class="div2_1">
<input type="text" value="Wed, Jun 27, 2012"/>
</div>
<div class="div2_2">
<input type="text" value="8.00am"/>
</div>
</div>
<div class="div3">
<div class="div3_1">
<input type="button" value="Done"/>
</div>
</div>
</div>
CSS
div{
padding: 3px 0;
}
input {
width: 100%;
}
.parent{
width: 400px;
}
.div1, .div2, .div3{
width: 100%;
}
.div2{
display: inline-block;
}
.div2_1, .div2_2{
display: inline-block;
}
.div2_1{
width: 55%;
float: left;
}
.div2_2{
width: 44%;
float: right;
}
.div3_1{
width: 30%;
display: inline-block;
float: right;
}
I hope this will be helpful for you.
Check out this page to find out how to layout your webpage in a "Grid System"
getbootstrap.com/css
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I have this code: http://jsfiddle.net/spadez/TPKLv/
<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white; float:right;">
Test test
</div>
I'm trying to make the right column fluid, taking up the remaining space, and the left column fixed width. Can anyone tell me what I am doing wrong with my code, and if this is the best way of doing it?
Simplest is to use display:table-cell; (IE8 and above supported )
this way, you can fix the width of one div and next div will take up the remaining space
Once added, you can even use inline native methods like vertical-align, and since its not floating, adjusting the position of divs is easy through margin and padding depending on you layout! :)
check this demo
It is most compatible and cleanest you can get for fixed width and dynamic width in a page
for calc, it is incompatible with IE9 still
if you have to use it on regular basis, create a span as below :
span.fake_width{
display:block;
width:20px;
}
then just add it to the existing layout Demo
I suggest this, with the condition always left div width is 400px. And i assume is cause you use inline-style
html
<div style="background-color:white; width: 400px;float:left;">
<span class="status" id="active"></span>Title
6
</div>
<div id="rightCol" style="background-color: white; float:right;">
Test test
</div>
css
body {background-color: gray;}
#rightCol{
width: calc(100% - 400px);
}
fiddle
The most native way of doing this is to manipulate the box model:
I've added a float to the first div, and removed it from the second one.
this way the first div is treated as an inline-block and the second one is a block, which tries hard to ignore other inline blocks.
i've updated your fiddle: http://jsfiddle.net/TPKLv/3/
<div style="background-color:white; width: 400px; float:left">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white;">
Test test
</div>
Try like this: Demo
CSS:
.container {
background-color:blue;
height: auto;
overflow: hidden;
}
.sidebar {
float:left;
background-color:grey;
width: 100px;
}
.content {
background-color:green;
float: none;
width: auto;
overflow: hidden;
}
HTML:
<div class="container">
<div class="sidebar">
<span class="status " id="active"></span>
Title
6
</div>
<div class="content">Test test</div>
</div>
UPDATED FIDDLE LINK.
As you need, I added padding and margin for the div's and its working fine.
Suppose I have an HTML page with three blocks of fixed width (their height can vary if that's important), like shown on picture:
I would like to make it behave as shown on next picture: when browser screen width is reduced so it can't fit all three blocks in one line, first block goes down.
Is it possible to achieve such behavior? Preferably with CSS only but any working solution would be great.
<div style="width: 100%;">
<div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
<div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
<div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
<br style="clear: left;">
</div>
This one works. You put block 1 as the last one and only make that one float left.
It's virtually impossible to let the first block drop down without any Javascript trickery. Making the right-most one drop with float: left is easy on the other hand.
Use divs with float:left and fixed width values
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
3
</div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
2
</div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
1
</div>
like so...
I am aware that the 1st one will go right but this is the simplest i can do without getting into javascript..
Put all these three blocks inside a div and set it's width to 100%, when the screen will resize the blocks will be arranged automatically.
<div style="width: 100%;">
<div style="width: 50px; float left;">DIV1</div>
<div style="width: 50px; float left;">DIV2</div>
<div style="width: 50px; float left;">DIV3</div>
<br style="clear: left;" />
</div>