I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
Related
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);
}
I am trying to get the "ChatBox" to float to the right side of the <main> tag, opposite side of Box1 and NavBox.
If I remove either Box1 or NavBox then it works. Otherwise I can only get it to the bottom of the page (when "ChatBox" is after the <main> tag), or to the right (when before the <main> tag), but it won't go to the top of the <main> box, it will start about 200px down.
The only HTML that can be changed is to move "ChatBox" about the <main> tag. Mostly has to done using CSS only.
http://jsfiddle.net/8em3m60m/26/
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
clear:left;
max-width:999px;
min-height:100%;
margin:0 auto;
border:0;
text-align:left;
}
.mainnav, .box-1 {
float:left;
clear: left;
vertical-align:top;
width:180px;
height:200px;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height:550px;
padding-top: 40px;
background: #7d7e7d;
margin-top:100px;
}
.main-1{
width: 548px;
margin-left:194px;
min-height:250px;
background-color: #3f3f3f;
padding:6px;
}
HTML
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
EDIT: The only possible HTML change I can make is to move the ChatBox above, or below, the <main> tag.
Using Absolute Positioning
If you want to keep the HTML as you presented, you can use absolute positioning as follows.
You need to apply position: relative to #wrapper and then use suitable top and right offsets for .chatbox.
You need to specify a width or min-width to the wrapper or else you will get
some overlapping with the absolutely positioned element.
This solution may work but it depends on your other requirements regarding flexibility and responsiveness.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: #000;
font: normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color: #c2c2bd;
}
#wrapper {
clear: left;
width: 999px;
min-height: 100%;
margin: 0 auto;
border: 0;
text-align: left;
position: relative;
}
.mainnav,
.box-1 {
float: left;
clear: left;
vertical-align: top;
width: 180px;
height: 200px;
margin: 18px 0 0 8px;
outline: 1px dotted yellow;
}
.chatbox {
vertical-align: top;
width: 196px;
min-height: 200px;
outline: 1px dotted yellow;
position: absolute;
right: 8px;
top: 18px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
outline: 1px dashed yellow;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background-color: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
Without restructuring your HTML (which I would strongly suggest; it's a little unsemantic and nonsensical), you can achieve what you're looking for this way:
JSFiddle Example
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
max-width: 999px;
min-height: 100%;
margin: 0 auto;
}
.box-1, .mainnav {
float: left;
clear: left;
width: 180px;
height:200px;
vertical-align:top;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
position: relative;
top: -200px;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<div id="chatbox" class="chatbox">ChatBox</div>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
</div>
I've moved your .chatbox element above .main, and have given it position: relative; and moved it 200px above the top position of where it would normally be, so that it is in line with Box 1. A better way to do this that doesn't require the position property would be to wrap .box-1 and .nav in a containing element, float the containing element left, and then move the .chatbox element above the .main element and float it right.
I usually would have used position:absolute for having the chatbox align on the right at the top. Your CSS would be;
.chatbox {
position:absolute;
top: 0;
right: 0;
width:196px;
min-height:200px;
}
This will align it to the top-right of the parent element of the chatbox.
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example
Simple question, but I'm struggling with solution.
Jsfiddle here.
How can I get the title and date to both align to the bottom of the container, while ensuring that:
The length of the title will push the date across (but doesn't need to wrap)
The blue button is always centrally aligned between the date and the red icon
The titleBar container is always the same fixed height
Need a CSS-only solution if possible - I already know how to do this with JS if needed
HTML:
div class="titlebar bgEarth0">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
<div class="icon"></div>
<div class="buttonArea">
<div class="button"></div>
</div>
</div>
CSS:
.titlebar { height: 50px; border:1px solid #000}
#title {font-size: 20px; font-weight: normal; float: left; margin:0}
#date { font-size: 12px; font-weight: normal; float: left; margin-left: 30px; margin:0 12px}
.buttonArea {position:relative; overflow:auto; height:40px; margin-top:5px}
.button {margin:0 auto; width:60px; height:40px; background:#0000ff}
.icon {float:right; background:#ff0000; height:40px; width:60px; margin-top:5px}
http://jsfiddle.net/hC236/
You can use absolute position.
Wrap title and date with a div and set its position to absolute.
HTML:
<div class="titlebar bgEarth0">
<div class="bleh">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
</div>
<div class="icon">ddd</div>
<div class="buttonArea">
<div class="button"></div>
</div>
</div>
CSS:
.titlebar {
height: 50px;
border:1px solid #000;
position: relative;
}
.bleh {
position: absolute;
bottom: 0px;
left: 0px;
}
#title {
font-size: 20px;
font-weight: normal;
float: left;
margin:0
}
#date {
font-size: 12px;
font-weight: normal;
float: left;
margin-left: 30px;
margin:0 12px
}
.buttonArea {
position: absolute;
overflow:auto;
height:40px;
top:5px;
right: 0px;
}
.button {
margin:0 auto;
width:60px;
height:40px;
background:#0000ff
}
.icon {
background:#ff0000;
height:40px;
width:60px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
OR Table Example:
http://jsfiddle.net/hjM56/
HTML:
<div class="titlebar">
<div class="col-1">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
</div>
<div class="col-2">
<div class="icon"></div>
</div>
<div class="col-3">
<div class="button"></div>
</div>
</div>
CSS:
.titlebar {
display: table;
height: 50px;
border: 1px solid #000;
width: 100%;
}
.col-1,
.col-2,
.col-3 { display: table-cell; }
.col-1 {
white-space: nowrap;
vertical-align: bottom;
width: 1%;
}
.col-2 {
text-align: center;
width: auto;
}
.col-3 {
text-align: right;
width: 1%;
}
#title {
font-size: 20px;
font-weight: normal;
display: inline-block;
margin: 0px;
padding: 0px;
}
#date {
font-size: 12px;
font-weight: normal;
margin-left: 12px;
margin-top: 0px;
margin-right: 12px;
margin-bottom: 0px;
display: inline-block;
padding: 0px;
}
.button {
width: 60px;
height: 40px;
background: #0000ff;
margin-top: 5;
display: inline-block;
}
.icon {
background: #ff0000;
height: 40px;
width: 60px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Here is one way to do it but it involves some extra mark-up.
I added some wrappers around the title and date as follows:
<div class="titlebar">
<div id="titleArea">
<div id="table-wrap">
<div id="table-cell">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
</div>
</div>
</div>
<div class="icon"></div>
<div class="buttonArea">
<div class="button"></div>
</div>
</div>
Apply the following CSS:
.titlebar {
height: 50px;
border:1px solid #000
}
#titleArea {
height:40px;
margin-top:5px;
float: left;
}
#table-wrap {
display: table;
height: 100%;
}
#table-cell {
display: table-cell;
height: 100%;
vertical-align: bottom;
}
#title {
font-size: 20px;
font-weight: normal;
padding:0;
display: inline;
}
#date {
font-size: 12px;
font-weight: normal;
padding-left: 12px;
display: inline;
}
.buttonArea {
position:relative;
overflow:auto;
height:40px;
margin-top:5px;
border: 1px dotted blue;
}
.button {
margin:0 auto;
width:60px;
height:40px;
background:#0000ff
}
.icon {
float:right;
background:#ff0000;
height:40px;
width:60px;
margin-top:5px;
border: 1px dotted blue; /* for demo only */
}
See demo at: http://jsfiddle.net/audetwebdesign/5NDDQ/
I created an outer wrapper #titleArea that has the same height and top margin as the #buttonArea.
Within #titleArea, I created a CSS table/table-cell (two nested div's) so that I can get the vertical alignment to be at the bottom.
Finally, I set display: inline to #title and #date.
A detail that may need adjustment involves the base line of the title and time. The bottom leading causes the text to sit slightly above the bottom edge of the button.
It seems like a lot of work for what appears to be a relatively simple requirement.
To make this a bit more bullet-proof, I would add a min-width to the .titlebar to prevent the .buttonArea to develop a horizontal scroll bar and the .icon from wrapping to a second line.
You shouldn't use floating unless necessary. See this JSFiddle Live Demo
Basically if you remove the floats and display:inline-block; instead, they will align. I also removed the overflow:auto, as that would limit the icon area.
Also, adding left:15%; will align the blue area between the date and the red area.
EDIT: Example with max-width specifications to contain the div inside the title bar. Live Demo
I am not that bad at this, but somehow i am not able to center the contents of the page.
Also, the logo and tbar-right divs are not aligning properly (I'd like them to be arranged in a single line).
This is my markup:
<body>
<div class = "container">
<div id="topbar" >
<div class="logo">
<img src="images/rg-logo.jpg"/>
</div>
<div class="tbar-right">
<div id="User"><!--the script will feed this div--></div>
<!--Dummy Text-->Jasdeep, you have 24 routemiles |
My Profile |
Logout
</div>
</div>
</div>
</body>
...and these are the styles:
* {
margin:0;
padding:0;
}
body{
-x-system-font:none;
background:#FFF;
border:0 none;
color:#555F6A;
font-family:Verdana,arial,helvetica,sans-serif;
font-size:0.7125em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5em;
margin:0;
padding:0;
text-align:center;
}
.container {
text-align: center;
}
#topbar {
background-color: #df3e36;
height: 32px;
width: 1004px;
}
.logo {
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right {
text-align: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
.tbar-right a{
color: #FFF;
}
Please, help!
.container{margin:0 auto;}
As long as you have defined an explicit width. You should also probably replace
<div class = "container">
with
<div class="container">
Should center container. Make sure you don't float it.
.container{
width: /* must specify a width */
margin-left:auto;
margin-right:auto;
}
This should fix the alignment
.logo{
float:left;
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right{
float: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
And you may need to rearrange the HTML a bit by putting the .tbar-right before the .logo
Try this:
#topbar { margin: 0 auto;}
The logo isn't aligning with the other stuff because it has a different padding-left. Change to
.logo {
padding-left: 0px; //or don't even list a padding-left,
padding-top: 4px;
width: 15%;
height:27px;
}
OH if you wanted it on the same line horizontally float them both to the left or right, and make sure there's enough space. ;D