<html>
<head>
<style type="text/css">
.floatleft {
border: 1px solid blue;
float: left;
}
.floatright {
border: 1px solid red;
float: right;
}
#media screen and (max-width: 800px) {
#div1 {
float: none;
}
}
</style>
</head>
<body>
<div id="div1" class="floatleft">Div 1</div>
<div id="div2" class="floatleft">Div 2</div>
<div id="div3" class="floatleft">Div 3</div>
<div id="div4" class="floatright">Div 4</div>
</body>
</html>
I'm doing my first RWD project and I'm struggling to understand how the repositioning of divs work upon resize.
In my code example, on resizing to 800px div1 will move above all the other divs, which is what I want, but what I'm finding difficult is how would I move div4 to the right of div1 as per my picture below.
You should wrap divs 1, 2 and 3 in a parent div that is floating left. Then your div 4 can float right on its own. Adjust the widths accordingly.
<div id="parent" class="floatleft">
<div id="div1">Div 1</div>
<div id="div2" class="floatleft">Div 2</div>
<div id="div3" class="floatleft">Div 3</div>
</div>
<div id="div4" class="floatright">Div 4</div>
See this fiddle
you are sort of on the right foot, you need to only call the pull-right class on div 2 and have it on the first one, the div one will have display default which is block and the other 2 will have display inline to be next to each other.
<div id="div4" class="floatright">Div 4</div>
<div id="div1">Div 1</div>
<div id="div2" style="display:inline;">Div 2</div>
<div id="div3" style="display:inline;">Div 3</div>
div{
border: 1px solid blue;
display:inline;
}
.floatright {
border: 1px solid red;
float: right;
}
see fiddler
Demo fiddler
You could set a percentage width for both, div1 having say 80% width and div4 having say 20% width? Although, div4 will have to be below div1 in the html for that to work.
Do you not have any widths set right now?
Related
My question must be little bit confusing and will have many related questions. But I think my case is different.
Please run the code in full screen and reduce the size of the screen to around such that there will be
Two boxes per row
One box per row
In both cases there will be lot of empty space to right of the adjacent box, what I want is to align the box to the center and make look both right and left equal when such a case occurs. It should work for both the cases (Two boxes per row & One box per row)
body{
background-color : #E9EAED;
}
.box{
position: relative;
width: 400px;
float: left;
border: 1px solid rgba(35, 173, 278, 1);
height: 120px;
background-color: white;
cursor: pointer;
margin: 15px 15px 15px 15px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box">box 1 </div>
<div class="box">box 2 </div>
<div class="box"> box 3</div>
<div class="box"> box 4</div>
<div class="box">box 5 </div>
<div class="box">box 6 </div>
<div class="box"> box 7</div>
<div class="box"> box 8</div>
<div class="box"> box 9</div>
<div class="box"> box 10</div>
<div class="box">box 11 </div>
<div class="box">box 12 </div>
<div class="box"> box 13</div>
<div class="box"> box 14</div>
</body>
</html>
Add to body
body {
text-align: center;
}
And change the box class
.box {
float: left; //remove this
display: inline-block; //add this
text-align: left; // that your text would be aligned normally again
}
I'm having trouble making my work neater. I'm really trying to learn how to simplify my efforts. But I start first with putting everything on the screen and then div'n the elements out. After I've seen all my elements, I tackle the css.
.left {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: left;
height: 400px;
width: 33%;
}
.middle {
position: relative;
margin: 50px 3px 10px 3.5px;
float: left;
height: 400px;
width: 33%;
}
.right {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: right;
height: 400px;
width: 33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter</p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>
Link to see it work on jsFiddle --
http://jsfiddle.net/a1ynzr7p/1/
<div id="header">
<p id="logo"> GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="evenThree" id="preview">LEFT
</div>
<div class="evenThree" id="preview">MIDDLE
</div>
<div class="evenThree" id="preview">RIGHT
</div>
<div id="footer">
</div>
CSS
.evenThree{float:left; width:33%;}
Another solution would be to use display:flex; on the parenting container of those three items.
http://jsfiddle.net/kqxyqL0f/3/
.contentWrapper {
display:flex;
}
.column {
width:33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter
<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="contentWrapper">
<div class="column" id="preview">TESTING LEFT</div>
<div class="column" id="preview">TESTING MID</div>
<div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>
Are you trying to create three columns (aligning div's horizontally)? You can simply wrap each column (left, middle and right) with a class that applies: float:left and width:33%.
As seen here: jsfiddle
.col-3 {
float:left;
width:33%;
}
<div class="row">
<div class="col-3">Left</div>
<div class="col-3">Middle</div>
<div class="col-3">Right</div>
</div>
Also some tips to help your code:
ID's are non re-usable, don't repeat them throughout the code. Either change them to a class or change the ID to be unique.
Make sure all the <li> elements are wrapped in a <ul> or <ol> tag
You can also do these two things. See the boxes 1 - 3, they're using DIV with CSS display: table-cell. Easier to get the contents inside centered in the box. The DIV containing Boxes 4, 5, and 6 are using display: inline-block - they're more flexible with using margins between them, but, you'll have to do something special to make the text go center (wrap it in <span>).
Or you can learn Twitter-Bootstrap (look it up). You'll be far better off with it when applying layouting for websites especially when your requirements are to make it mobile friendly.
.container {display: table;margin-bottom:30px}
.set {
display:table-cell;
width: 200px;
height: 200px;
text-align:center;
vertical-align:middle;
padding:10px;
background-color:#9a9a9a;
border:1px solid #444;
}
.set2 {
display:inline-block;
width:140px;
height:90px;
text-align:center;
background-color:#A75b5b;
margin: auto 10px;
border:1px solid #444;
}
<div class="container">
<div class="set">Box 1</div>
<div class="set">Box 2</div>
<div class="set">Box 3</div>
</div>
<div class="set2">Box 4</div>
<div class="set2">Box 5</div>
<div class="set2">Box 6</div>
I have a series of elements. The last element is an image. I'm trying to get that image to float to the top, next to the other elements. The goal is to not have any extra wrappers, or use absolutes.
The height of #a, #b, #c and #img are unknown. #img width is 200px, #a, #b, #c width is 800px. Area's height needs to calculate to its contents.
<div id=area>
<div id=a>Text area 1</div>
<div id=b>Text area 2</div>
<div id=c>Text area 3</div>
<img id=img src=# />
</div>
If I try css:
#a, #b, #c { float: right; width: 800px; }
#img { float: left; width: 200px; }
Then image will only float next to #c instead of #a.
Edit: The HTML cannot be changed. No wrappers, no modifications. I'm wondering if there is a trick I don't know about. I have one HTML structure for multiple view styles. I doubt there is a solution but I thought I would ask before giving up.
Make you html like this:
<div id=area>
<div id=img>
<img id=img src=# />
</div>
<div id=a>Text area 1</div>
<div id=b>Text area 2</div>
<div id=c>Text area 3</div>
#a, #b, #c {width: 800px; } #img { float: left; width: 200px; }
<div id="area">
<img id="img" src="#" />
<div id="a">Text area 1</div>
<div id="b">Text area 2</div>
<div id="c">Text area 3</div>
</div>
CSS:
#a, #b, #c {width: 800px; }
#img { float: left; width: 200px; display:inline-block }`
I need to create a centered grid of squares with text inside it. With jQuery help user will be able to add or remove squares (in row and column).
Basically the code would be:
<style>
div.square{
padding: 5px;
margin: 5px;
border: 1px solid green;
/*display: inline-table; /* IE fail*/
/*display: inline-block; /* IE fail*/
float: left;
}
div.row{
margin: 0 auto;
}
</style>
<div style="width:500px; border:1px solid red; margin: 0 auto">
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
</div>
What is the best way to do it?
Are you looking for something like this:
http://jsbin.com/etunuk/1/
Floated elements shrink wrap, so they need a width attached.
To center floated elements you need to add their width + paddings + margins + borders and assign that width to the wrapper, in this case .row and center .row.
If you remove the border, you need to remove the width, 1px * 6 from the row width and so on.
what i have is 3 divs, 1 for left 1 for center and 1 for right
what i need is 3 columns - the left is always there, the center as well but it's width should be adaptive if the right is there or not
<html>
<head>
</head>
<body>
<div style="width:460px; padding:0px 20px;">
<div style="float:left; background: red; width:100px;">
red
</div>
<div style="float:left; background: yellow; max-width:400px">
yellow
</div>
<div style="float:left; background: green; width:100px;">
green
</div>
</div>
</body>
</html>
what am i'm doing wrong?
The best I could come up with, in order to avoid JavaScript solutions and to use CSS and HTML only, is to use class-names for the columns, and to re-order your HTML in order that the right-most column is first in the html:
<div class="wrap" style="width:500px">
<div class="col right">Right Column</div>
<div class="col left">Left column</div>
<div class="col middle">Middle column</div>
</div>
<div class="wrap" style="width:500px">
<div class="col left">Left column 2</div>
<div class="col middle">Middle column 2</div>
</div>
With the CSS adjacent-sibling selector, firstSibling + secondSibling, this can be used to amend the width of the middle column:
.wrap {
width: 500px;
margin: 1em auto;
overflow: hidden;
}
.left,
.right {
width: 100px;
background-color: #ffa;
}
.middle {
width: 400px;
background-color: #f90;
}
.left,
.middle {
float: left;
}
.right {
float: right;
}
div.right + div.left + div.middle {
width: 300px;
}
JS Fiddle demo.
If you float the .middle column right, instead of left as in the previous example, then you can simplify the adjacent-sibling selector, and the HTML is, effectively, visually reversed (which is slightly easier to understand/work with than the above example wherein the two columns come first, in reverse order, and then the middle column comes at the end), giving:
<div class="wrap" style="width:500px">
<div class="col right">Right Column</div>
<div class="col middle">Middle column</div>
<div class="col left">Left column</div>
</div>
<div class="wrap" style="width:500px">
<div class="col left">Left column 2</div>
<div class="col middle">Middle column 2</div>
</div>
And the CSS:
.wrap {
width: 500px;
margin: 1em auto;
overflow: hidden;
}
.left,
.right {
width: 100px;
background-color: #ffa;
}
.middle {
width: 400px;
background-color: #f90;
}
.left {
float: left;
}
.right,
.middle {
float: right;
}
div.right + div.middle {
width: 300px;
}
JS Fiddle demo.
References:
Adjacent sibling selector, at the W3.org.
Width includes borders, you have to take that into consideration. If you decrease the width of the center element a bit, the right will not wrap.
I don't however see anything in your code which would handle the center width being "adaptive".
Not sure exactly what you're trying to do, but this might work. If you can give a little more detail about what it is supposed to do, it would help, but this seems to do what you want. If the right column is set to display:none then the center still goes all the way over.
<html>
<head>
</head>
<body>
<div style="width:480px; padding:0px 20px;">
<div style="float:left; background: red; width:100px;">
red
</div>
<div style="float:right; background: green; width:100px;>
green
</div>
<div style="background: yellow; width:100%;">
yellow
</div>
</div>
</body>
</html>