I have a webpage containing a centered container with content and I want to display a logo next to it.
The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.
html, body {
height: 100%;
width: 100%;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
<div id="container">
</div>
<div id="lef">
</div>
A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/
This is the option that comes closed
http://jsfiddle.net/7QJQn/4/
I think that the best solution for doing something like this is just using javascript / jQuery.
Depending on which browsers you wish to support, you could use calc().
Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?
CSS (fiddle here):
#lef {
background-color:yellow;
width:calc(50vw - 100px);
height:20px;
position:absolute;
right:0;
top:0;
}
Add this to your css:
#lef{
float:left
}
And change the order of the divs in the html, like this:
<div id="lef"></div>
<div id="container"></div>
First of all, you should wrap your markup in a wrapper div so elements stay tight.
I made some changes, take a look:
<div id="wrapper">
<div id="lef">
</div>
<div id="container">
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
}
#wrapper{
width: 360px;
}
#container {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}
Example
If using flexbox is an option, you can do this with the flex-grow property:
With the following markup
<div class="main-row">
<div class="filler"></div>
<div class="row-content">Fixed width centered div</div>
<div class="filler"></div>
</div>
you need to set flex-grow: 1 on the filler divs. See this fiddle.
Related
Hi,
See the screenshot, I'd like to know how I can fit my simple countdcown to always take 100% of the screen? I've made it to fit my phone, but Id like it to be 100% on the desktop aswell.
What I've tried:
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
}
But, this will only make the body 100%..
Where do I start? Does anybody have a tutorial or anything?
A simple example of using vw or vh (viewport), try it and you will see the difference.
Also with to center your element. you could use:
display: flex;
align-items: center;
justify-content: center;
Vertical Centering
REF: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Viewport
REF: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
body {
margin: 0;
}
.test1 {
background: red;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.test2 {
background: green;
width: 100vw;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.innerwraper {
height: 100px;
width: 200px;
background: aqua;
}
<div class="test1">
<div class="innerwraper">This is 100% width</div>
</div>
<div class="test2">
<div class="innerwraper">This is 100vw</div>
</div>
Automatically the height and the width of the body is 100% and it can not be changed to an other value so your code is unuseful.
To make the content take bigger height and width you should modify the css height and weight properties of the content (buttons, text inputs, divs, etc).
You will have to define all sizes, lengths and widths in 'vw' and 'vh'. It stands for viewport width and viewport height. This will tell the browser to render every objects size relative to the width of the screen (or height, depending on what you choose).
In your example every object should be about 20vh heigh, with a margin of 5vh. Four objects make then a perfect 100vh (100% viewport height).
You could start with this css:
input, div {height: 20vh; margin: 5vh 1vh;}
You can wrap the entire combination of buttons and views in a div, for example:
<div id = "wrapper"> </div>
Then inside of the div modify each element's height and width based on percentages. For example, you have 4 elements vertically, and three buttons on the bottom. So your three buttons on the bottom could be further wrapped in another div making them act as one element. Then you can split the 4 elements to height: 25%; and make width inherited.
So it would look something like this:
<body>
<div id="wrapper">
<div class="element"> insert element here such as input </div>
<div class="element"> element here such as input button </div>
<div class="element"> element here such as counter </div>
<div class="element">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
CSS:
.element{
height:25%;
width:inherit;
}
#wrapper{
height:100%;
width: 100%;
}
Above all the properties inside the block of codes if there is no * {
box-sizing: border-box;
}
The Content will not fit in...
I want to create two divs beside each other, however I want the one on the left side to be 300px, and the right one to take up the remaining amount on the screen. How would that be possible? Thanks!
The most straight-forward (and I would say correct) way is to use display: table:
#wrapper {
display: table;
width: 100%;
}
#left, #right {
display: table-cell;
color: white;
}
#left {
background: blue;
width: 300px;
}
#right {
background: red;
}
<section id="wrapper">
<aside id="left">Left 300px</aside>
<div id="right">Right the rest</div>
</section>
http://jsfiddle.net/YbLZE/1/
Try resizing the bottom right frame.
Updated with HTML5 elements section and aside, which you should use if you have an HTML5 doctype. I have to remember to use those...
This is the working example:
http://jsfiddle.net/tnm62/
Explenation:
1. Place both elements in one container.
2. Position your left element absolute, set its width to 300px.
3. Set left margin to your right element to 300px.
One solution is to float: left; the left div that's 300px wide, and then apply overflow: hidden; to your right div. Here's the basic outline:
HTML:
<div class = "left">
Glee is awesome!
</div>
<div class = "right">
Glee is awesome!
</div>
CSS:
.left {
width: 300px;
float: left;
}
.right {
overflow: hidden;
}
And a little demo: little link.
Here's something for newer browsers (not IE):
CSS:
#container {
display: box;
}
#left {
width: 400px;
}
#right {
box-flex: 1;
}
HTML:
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
Demo: http://jsfiddle.net/N5zhH/1/
This should be sufficient:
<div style="overflow: hidden;">
<div style="width: 300px; float: left;"></div>
<div style="margin-left: 300px;"></div>
</div>
overflow: hidden will stretch the container div to accommodate the tallest child element
float: left floats the element left (doh!)
width: 300px and margin-left: 300px together assures that if the right column is taller than left it will not flow below the left floated div; it will maintain a 300x gap from the left edge of container div
Tip: change to margin-left: 320px to add a 20px gutter
Here is a nice little DEMO
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.
Does anyone happen to know if this can be done?
My attempt (renders block2 underneath block1):
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You can do it like this:
HTML:
<div class="right">right</div>
<div class="left">left</div>
CSS:
.left{
background:red;
}
.right{
float:right;
width:200px;
background:green
}
Check this live example http://jsfiddle.net/QHTeS/2/
Float Both of the elements left:
<style>
.block1 {
width: auto;
height: 200px;
float: left;
background-color: green;
}
.block2 {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You should wrap them in a container as well to prevent messing up the rest of your layout. :)
http://jsfiddle.net/tcFjN/
That was wrong!
Use display: table; on parent and display: table-cell; on children:
<div id="wrapper">
<div class="block1">test1</div>
<div class="block2">test2</div>
</div>
#wrapper
{
display: table;
width: 100%;
}
.block1 {
width: auto;
height: 200px;
display: table-cell;
background-color: green;
}
.block2 {
display: table-cell;
height: 200px;
width: 200px;
background-color: red;
}
http://jsfiddle.net/tcFjN/1/
This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is
parent (has a border, margin, padding,...)
left (fixed width)
right (variable width, fill the entire space)
I must rewrite it as
parent (has a border, margin, padding,...)
wrapper (has no styling)
left (fixed width)
right (variable eidthm, fill the entire space)
My HTML is
<div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
<div style="">
<div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
<div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
</div>
</div>
The main points here are:
No use display:table because then we can not set the border
The use of min-width, max-width
The use of width:100%
Check this jsfiddle
Start out with a container <div> (#container) that holds both the left and right <div>s. Float one <div> to the right and give it a specific width (320px in my example). Then give the other <div> an absolute position starting at the absolute left (0px) and ending at the left edge of the <div> on the right (320px).
If you adjust the width of #container, the right <div> will remain fixed at 320px while the left <div> will expand to fill whatever the remaining area is.
I want to have three columns, a 1000px middle column that is centered to the page and then a column on the left and right that takes up the remaining width.
I basically want something that looks like this:
Where the wrapper is 1000px and the two side spaces are half of the remaining total space.
You can easily centre an element with margin: 0px auto. This will leave a space on the left and right of the element. If the element is inside another which takes up the entire width, then a background can be placed and centred inside it.
An example might be:
<div id="container">
<div id="content"></div>
</div>
Then the CSS would look like:
#container {
width: 100%;
/* Background properties go here. */
}
#content {
margin: 0px auto;
width: 1000px;
}
It wouldn't be possible to put content either side of the #content div.
For a pure CSS approach, try something like http://jsfiddle.net/hKB9T/2/ (make sure to widen your browser window so that the "results" box is ~1200px wide or so)
it isn't complete (depending on your requirements, you may need to fiddle with the position of the .center element) but it should put you on the right track.
<div id="page">
<div class="center">center column</div>
<div class="leftcol">
<div class="inner">left column</div>
</div>
<div class="rightcol">
<div class="inner">right column</div>
</div>
</div>
and
.leftcol, .rightcol {
width: 50%;
float: left;
}
.leftcol .inner {
margin-right: 500px;
height: 200px;
}
.rightcol .inner {
margin-left: 500px;
height: 200px;
}
.center {
width: 1000px;
margin: 0 auto -200px auto;
background-color: #eee; /* just for illustration */
}
so lets say your "page width" is 1024px in width. I would do something like this --
html:
<div id="page_content">
<div id="element_left">
</div>
<div id="centered_element">
</div>
<div id="element_right">
</div>
</div>
css:
#page_content { width:1024px; margin:0px auto 0px auto;}
#element_left { width:12px; float:left;}
#element_right { width:12px; float:left;}
#centered_element { width:1000px; margin:0px auto 0px auto; float:left;}
I'm new as webdesigner and I have to create a portion of a page that has 3 columns: a menu on the left side, the central body and a vertical banner. I can't use tables, so I've created a similar HTML:
<div class="Body">
<div class="LeftMenu">My menu</div>
<div class="Content">Foo body</div>
<div class="VerticalBanner">My menu</div>
</div>
While the CSS:
.LeftMenu {
width: 20%;
}
.Content {
margin: auto;
left: 20%;
position: absolute;
top: 0px;
width: 60%;
}
.VerticalBanner {
left: 80%;
margin: auto;
position: absolute;
top: 0%;
width: 20%;
}
So, my problem using that code is that the parent div (Body) takes the height of the first div (LeftMenu), which is not the bigger. This causes the content of "Content" and "VerticalBanner" to flow out "Body" and to go under the Footer div. If I use the float attribute, the "Body" div collapse without dimensions and then the footer div slides under the three columns inside "Body".
I also tried with display attribute, but Internet Explorer doesn't support this and some columns have strange behaviour.
What is the correct way to do this?
I think you should use floats for your DIVs. It's much easier after that to move them around.
Use display: table-*:
.Body { display: table; }
.Left, .Content, .VerticalBanner { display: table-cell; }
See e.g. this JSfiddle.
To stop the body div from collapsing you can use
.body{ overflow: hidden; }
I'm don't think you need position absolute.
<div class="Body">
<div style="width:20%;float:left;">My menu</div>
<div style="width:60%;float:left;">Foo body</div>
<div style="width:20%;float:left;">My menu</div>
<div style="height:1px;font-size:1px;clear:both;"> </div>
</div>