Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.
I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.
i have designed a simple structure here in Jsfiddle,have a look
MARK-UP::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):
.container {
width: 800px;
margin: 0 auto;
}
The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)
[Edit: oops forgot a bit]
As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.
If your two sections have the possibility of having different heights, you can break it up, so that:
One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.
This means your code will be something like:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
And your CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)
Related
In the page here: https://irfan.io
I have tried centring the smaller circles every-way I can think of and they either don't get centred or the centring is not responsive-- meaning it fails when the viewport is changed.
They are all of class .small and they are children of #main.
I have tried flexbox:
#main{
display:flex;
align-items:center;
justify-content:center;
}
.small{
display:flex;
}
I have tried giving wrapping the .small elements in a container and giving that a fixed width and centring with -0.5 of the width:
#smallContainer{
width:500px;
margin-left:-250px;
position:relative;
left:50%;
}
I also figured since they were inline-block elements I could use text-align:center; on the .small element, but that didn't work.
#small{
text-align:center;
}
I can't seem to figure out how to centre 3 small circles so that the middle one is in the vertical-middle like the bigger circle ( .big ), which I centred using the 2nd technique.
Does anyone have any ideas on how to do this?
You have a mistake. Your inline-block elements has a left of 50% (even you will center, there are a 50% more to the right).
You can solve like this:
#smallContainer { text-align: center; }
.small { left: 0; }
you can try this:
DEMO:
#main{
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.small{
display:flex;.
text-align:center;
display:inline-block;
width:100px;
height:100px;
border:1px solid black;
}
#smallContainer{
margin-left:0 auto;
position:relative;
}
<div id="main">
<div id="smallContainer">
<div class="small">
text
</div>
<div class="small">
text
</div>
<div class="small">
text
</div>
</div>
</div>
fiddle here
What i did is simple.. just make #main and #smallContainer position relative, remove the left and width from #smallContainer to make it expand only according to its children, then put margin:0 auto; to #smallContainer. This way even if the viewport change you're sure the .small div's are centered.
EDIT
I updated the fiddle, I just removed the display:inline-block; from .small in css.
Dont forget to mark this as answer if it gives you what you need my friend :)
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I need some help, this is bothering me...
I have the following DIV structure:
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
</div>
And the following CSS code to style it:
body, html {
height:100%;
margin:0px;
padding:0px; }
#principal {
width:1000px;
height:100%;
margin:0px auto; }
#colIzquierda {
width:250px;
float:left; }
#colDerecha {
width:750px;
float:right; }
I have a problem when I fill for example #colDerecha with lots of content, and it overflows the height of the windows of my browser, then I can see something like this:
Where the dark grey = #principal, light grey = body, green = #colDerecha.
How can I make #principal gain the same height as #colDerecha always, when #colDerecha content is bigger than the screen size?
I don´t know if I explain myself enough...
Please some ideas? I have tried adding height:100% to both #colIzquierda and #colDerecha, but does not do what I want. It overflows the same, but in other way...
A common approach would be to change the display of the parent element, #principal, to table, then set the display of the children elements to table-cell. In doing so, #colIzquierda and #colDerecha will fill the remaining space.
Example Here
#principal {
width:100%;
height:100%;
background:gray;
display:table;
}
#colIzquierda {
width:25%;
display:table-cell;
}
#colDerecha {
width:75%;
display:table-cell;
background:gold;
}
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
<div style="clear: both;"></div>
</div>
Why use the PHP tag in your question ?
I've been trying to make a page which contains a column of 330px width at left and then an other column of 670px max-width that is centered at the remaining width of the page. Of course if screen width is too small to fit 1000px, the second column will be resized. How do I do that?
This is my current CSS Code:
#left {
float:left;
width:330px;
}
#right {
???
}
You can easily do this without calc or other nasty overly modern hacking. The following should even work fine in IE7, not sure about IE6 and its respect for margin:0 auto in nested elements but could even work:
HTML
<div id="layout">
<div id="leftcolumn">
Test
</div>
<div id="remainder">
<div id="rightcolumn">
Test
</div>
</div>
</div>
CSS
div {
color:white;
height:400px;
text-align:center;
}
#leftcolumn {
background:red;
float:left;
width:120px;
}
#remainder {
margin-left:120px;
}
#rightcolumn {
width:100%;
margin:0 auto;
max-width:300px;
background:green;
}
Fiddle supplied.
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}