In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.
I'm pretty clueless as to:
how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="outer_border">
<div class="inner_border">
<!--just use a div to represent the image -->
<div class ="image">
</div>
<span class="upper_left_text">
upper left
</span>
<span class ="header">
<h2>
Header
</h2>
</span>
<span class="upper_right_text">
upper right
</span>
<button class="button1">Button</button>
<textarea class="text_area">Text Area</textarea>
<button class="button2">Button 2</button>
</div>
</div>
</body>
</html>
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
float: right;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
.button1 {
float: right;
}
.button2 {
float: right;
width: 80px;
height: 60px;
}
.text_area {
clear: both;
display: block;
width: 100%;
height: 150px;
margin: 5px;
/*I have no idea how to position this*/
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
I made a jsfiddle, check this one, should get you started :)
https://jsfiddle.net/fazbyxyq/
html5
<div class="right">
<div>upper left</div>
<div>header</div>
<div>upper right</div>
<div><textarea>textarea</textarea></div>
<div>button2</div>
</div>
css3
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.left{
float:left;
width:10%;
height:100px;
border:1px solid #000;
}
.right{
float:left;
width:89%;
margin-left:1%;
}
.right div{
float:left;
width:33%;
border:1px solid #000;
}
.right div:nth-child(2){
text-align:center;
}
.right div:nth-child(3){
text-align:right;
}
.right div:nth-child(4),.right div:nth-child(5){
width:99%;
border:0;
}
.right div:nth-child(4) textarea{
width:100%;
height:100px;
margin:10px 0;
}
.right div:nth-child(5){
text-align:right;
}
Peace out!
well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.
As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.
Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),
Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.
I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.
Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left
here you have the fiddle
The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:
<div id='demo'>
<div class='col1'>
<img src='http://www.placehold.it/50x100' />
</div>
<div class='col2'>
<div class='header'>
<span class='left'>left</span>
<span class='right'>
<button>button</button>
right
</span>
<h2>center</h2>
</div>
<textarea>Lorem ipsum</textarea>
<button>button</button>
</div>
</div>
to achieve the result in your image, you should add the following css:
#demo {
border: 2px solid black;
padding: 10px;
}
#demo .col1, #demo .col2 {
display: inline-block;
vertical-align: top;
}
#demo .col2 {
width: calc(100% - 60px);
}
#demo .left {
float: left;
}
#demo .right {
float: right;
}
#demo .header {
text-align: center;
}
#demo textarea {
width: 100%;
min-height: 100px;
margin: 8px 0;
}
#demo button {
float: right;
margin-left: 8px;
}
Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.
I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.
Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.
Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/
I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
}
#tall{
height:100%;
float:left;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
h2 {
display:inline;
}
.button1 {
float: right;
}
.button2 {
width: 80px;
height: 60px;
display: block;
float:right;
}
.text_area {
clear: both;
display: inline;
width:auto;
height: 150px;
margin-right: 0;
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
.text_area{
width:calc(100% - 70px);
}
Related
I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.
I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.
<style>
.container {
max-width:1280px;
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap: wrap;
}
.leftsidebar {
width:20%;
height:200px;
background-color:gray;
margin-top:15px;
}
.middle {
width:57%;
background-color:blue;
margin-left:15px;
margin-right:15px;
height:800px;
margin-top:15px;
}
.rightsidebar {
width:20%;
background-color:orange;
height:200px;
margin-top:15px;
}
</style>
<div class="container">
<div class="leftsidebar">left</div>
<div class="middle">middle</div>
<div class="rightsidebar">right</div>
</div>
You can't accomplish that with Flexbox, unless setting fixed height's all over.
Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.
Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.
Stack snippet
.container {
max-width: 1280px;
height: 200px;
margin: 0 auto;
display: flex;
}
.leftsidebar, .rightsidebar {
width: 20%;
background-color: gray;
margin-top: 15px;
}
.rightsidebar {
background-color: orange;
clear: left;
}
.middle {
width: calc(60% - 30px); /* calc for margin */
background-color: blue;
margin: 15px 15px 0 15px;
height: 800px;
}
#media (max-width: 600px) {
.container {
display: block;
}
.leftsidebar, .rightsidebar {
height: 200px;
float: left;
}
.middle {
width: calc(80% - 30px); /* calc for margin */
float: right;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I could come up only with old good floats, no flexboxes at all. If you don't have to use flexboxes and you are interested, with pretty light hustle it might look like this (snap point is 700px):
* {
box-sizing: border-box;
}
.container {
width:90%;
height:200px;
margin:0px auto;
}
div > div {
background-color: orange;
float: left;
color: white;
text-align: center;
padding: 1em;
}
.leftsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
.middle{
width:56%;
margin: 15px 2% 0%;
height:415px;
}
.rightsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
#media (max-width: 700px) {
div > div:nth-of-type(2n + 1) {
width: 33%;
}
div > div:nth-of-type(2n) {
float: right;
width: 65%;
margin-right: 0%;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
My current work is shown below. What I would like to achieve is that the text Membership Registration is aligned center, while the hyperlinks English and 中 文 is floating right but close to border-bottom - Now they are floating to the top.
HTML:
<div id="Header">
<a id="logo" href="http://localhost"><img alt="logo" src="images/logo.jpg"/></a>
<div id="HeaderText"><h1>Membership Registration</h1></div>
<div id="header_right">
English |
中文
</div>
</div>
CSS:
#Header {
height:70px;
margin-bottom:11px;
border-bottom: #dbe0e3 1px solid;
}
#header_right {
float: right;
padding-right: 50px;
}
#logo {
float: left;
height:65px;
left:20px;
top:17px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
#HeaderText {
float: left;
text-height: 65px;
text-align: center;
left: 50%;
}
Add padding-top to #header-right.
#header_right {padding-top: 30px;}
http://jsfiddle.net/e67wd21v/1/
Note to your code:
left and top do nothing when the element has no position property (#logo)
text-height property doesn't exist (used at #headerText) - you probably meant height or line-height.
update css for header_right
#header_right {
float: right;
padding:30px 50px 0 0;
box-sizing:border-box;
}
check fiddle
http://jsfiddle.net/swapnilmotewar/sh72pgmx/1/
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
I would like to have two divs sit next to each other. Both divs have their width set to a certain percentage. Between the two divs I want a fixed width margin of 20px. The width of div1 and div2 and the 20px margin should add up to 100% of the available space. (See screenshot below)
Heres a basic jsfiddle to get started: jsfiddle
code for jsfiddle link to work
Is this possible without javascript?
Easiest, safest way I know to do something like this is a nested <div>, using the outside div as a container for layout purposes. See here: http://jsfiddle.net/u7VzB/1/
HTML
<div id="container">
<div id="div1">div#1</div>
<div id="div2">
<div>div#2 inner</div>
</div>
</div>
CSS:
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 30%;
background-color: black;
}
#div2
{
float: left;
width: 70%;
}
#div2 > div {
margin-left: 20px;
background-color: blue;
}
You can also do something like this without disturbing HTML code:
#container {
color: white;
margin-top: 50px;
position: relative;
}
#div1 {
float: left;
width: 30%;
background-color: black;
}
#div2 {
float: left;
position:absolute;
left: 30%;
margin-left: 20px;
right: 0px;
background-color: blue;
}
Working Fiddle
try by setting float left, right and reduce the width
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 29%;
background-color: black;
}
#div2
{
float: right;
width: 69%;
background-color: blue;
}
I'm using this code...
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
/** Styling **/
#app {
border:1px solid #666;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:10px;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
}
However, it's not working like I want it to.
I want to add a border around it, but its not working (and its moving the content down).
You need to clear the floated elements in your #app . Try adding overflow:hidden; or overflow:auto; to #app. That will get the border to wrap you entire DIV.
Here's a live jsfiddle link of your above snippets with the overflow:hidden assigned:
http://jsfiddle.net/AhZAU/
The spacing at the top, "(and its moving the content down)", is being created by the margin-top:10px on the #app-actionbar. Remove the margin and the space will no longer be present: http://jsfiddle.net/AhZAU/1/
The QuirksMode Way©:
#app {
border:1px solid #666;
overflow: auto;
width: 100%;
}
http://jsfiddle.net/CePt6/
From the article:
If you want to add, say, a border
around all floats (ie. a border around
the container)...
NOTE
As far as the gap at the top, you can eliminate that by removing margin-top: 10px; from #app-actionbar.
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
http://jsfiddle.net/CePt6/2/
EDIT
Now, if you mean the content block is moving down, make the width of the #app the same width as your #app-actionbar:
#app {
border:1px solid #666;
overflow: auto;
width: 900px;
}
http://jsfiddle.net/CePt6/3/
Just for giggles, tried that but with some layout changes. Check if it helps. (demo here)
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
CSS:
#app {
border:1px solid #666;
clear:both;
position:absolute;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:0px;
}
#app-content {
float: left;
color: #333;
background: red;
height: 350px;
width: 725px;
display: inline;
left:200px;
top:75px;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
top:65px;
}
this should do the trick. jsfiddle.net demo
#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}
Here's what you can do:
Add the following lines to your #app div like this:
width:900px;
min-height: 300px;
overflow:auto;
The above is meant to auto-expand the outer div as the inner contents increase in length.
This however will be a restriction on older versions of IE since they did not have the min-height property.