I actually have a 3 column layout.
3 of these columns are placed inside a division.
I used float to align these columns.
#col1 {
float: left;
width: 15%;
background: #93A5C4;
padding-bottom: 10px;
min-height:450px;
}
#col2 {
padding: 10px 0;
width: 70%;
float: left;
min-height:450px;
position:relative;
}
#col3 {
float: left;
width: 15%;
background: #93A5C4;
padding: 10px 0;
min-height:450px;
}`
when these columns expand, the container holding these should also expand.. so what do i do?
it should expand like i use position:relative for these columns!
Block elements expand to the size of their CONTAINERS. The percentage widths refer to the width of the containing element.
You could use percentages for the wrapping div aswell.
And keep the values you have on the columns, because they will get % of the wrapping div.
Example:
HTML:
<div id="wrapper">
<div id"col_1">
</div>
<div id"col_2">
</div>
<div id"col_3">
</div>
</div>
And the CSS:
#wrapper{
width:90%;
}
#col_1{
width:15%;
float:left;
}
#col_2{
width:70%;
float:left;
}
#col_3{
width:15%;
float:left;
}
you have to clear the floats before you close the wrapper div
<div class="clear"></div>
//the css
.clear{clear:both;}
and make sure you haven't set "height" to the wrapper div
Related
I want to make 3 divs(left, middle, right) in one line, the left and right divs with fixed width, while the middle one with expanding width(with percent use).
So far I tried couple of variants, but nothing do the job.
I want it something like that:
[...150px...][...100%...][...150px...]
While at the middle I'll be able to put a text that will brake line normally(without inline).
Sorry for my bad english.
I need it as much as possible adaptable for cross-browsering.
You can do like this:
.div1{
width: 150px;
float: left;
}
.div2{
width: 150px;
float: right;
}
.middiv{
width: calc(100% - 300px);
margin: 0 auto;
}
But I would recommend you to use width for middiv by calculating yourself. For eg:
If the parent div width is 1000px then your middiv would be 1000 - 300 = 700px
This should work:
HTML:
<div class="table">
<div class="row">
<div class="fixedCell"></div>
<div class="cell"></div>
<div class="fixedCell"></div>
</div>
</div>
CSS:
.table{
width:100%;
height:20px;
display:table;
}
.row{
display:table-row;
}
.fixedCell {
width:150px;
display:table-cell;
background-color:red;
}
.cell{
display: table-cell;
background-color:green;
}
http://jsfiddle.net/yxt3gu11/
I would position the left and right parts absolutely and give the center a horizontal margin of 150px.
<div class="row">
<div class="left">left</div>
<div class="center">centered text</div>
<div class="right">right</div>
</div>
.row {
position: relative;
}
.left,
.right {
width: 150px;
background-color: #f99;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
margin: 0 150px;
}
Or see http://codepen.io/ckuijjer/pen/Fygow . If the left and right parts might have more content, add a clearfix to the row.
I am trying to center the contents of the container divs inside which will have four div's alignned 2 divs in a row, but it is not getting centered.
Not sure why this happens in google chrome and other browsers.
Below is the code, please help.
CSS:
.container{
margin: auto;
width:80%;
height:900px;
display: block;
text-align: center;
}
.column, .columns {
float:left;
min-height:1px;
padding:0 15px;
position:relative
}
section#{
width: 100%;
min-height: 500px;
background: url(../images/sidebar_shadow.png) repeat-y left top;
float: left;
margin-top: -2px;
}
.button.largebutton {
min-width:400px;
min-height:300px;
float:left;
margin: 60px;
}
PHP
<section id="main" class="column">
<h1 class="info_bar">My Surveys</h1>
<div class="container"> //contents of this div to be centered
<?php include 'tabcontainer_surveyholder.php'; ?> //pulls the four divs
</div>
</section>
One solution to this is:
Wrap the 4 div's in a wrapper. See the width of the wrapper in console and then write following css:
.wrapper{ position:relative;
left:50%;
margin-left:-(half of its total width);
}
here is a codepen
click me
I want to have a container with a set width and height.
Within that container I have:
a vertically and horizontally centered text
a few vertically centered icons on the left side of the container
a few vertically centered icons on the right side of the container
My test code:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
display:inline-block;
font-size:18px;
text-align:center;
}
.iconsleft, .iconsright {
display:inline-block;
}
.iconsright {
right:0;
}
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">centered text</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
</div>
(I took a random icon from google for this test)
This is what my test code looks like and what it should look like:
http://imgur.com/0QfcQnF
CodePen
I try to avoid floats:
http://jsfiddle.net/techsin/Gz4nv/1/
Things I did:
Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and make it 100 percent the height of container, thus stretching the line height to height of container. So when i would vertical-align something it would see whole height of container as something to get aligned with.
Declare container position as relative. Which would help in positioning icons absolutely. Because absolute positioning refers to first parent element that has been explicitly positioned relatively. position:relative.
Than simply put left:0; on left container and right:0; on right one.
make them both move down 50% the height of container.
Then make them move them up 1/4th the height of container to bring them in center vertically by giving them negative margin.
Demo
If you want the icons to go to one side, you should tell them to float in that direction.
The text isn't centered because it only takes up as much space as it needs. Explicitly setting a width, will tell it to take up more space, and thus allow the text to be centered. This could be in pixels or percentages. For example if you have a container with width A and four images with width B (each), you could set the width to A - 4B pixels.
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright {
display:block;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
Just float the two side <div>s to left and right, and put the right <div> before the centered <div> in the HTML structure.
Demo here
<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
font-size:18px;
text-align:center;
}
.iconsleft {float: left;}
.iconsright {float: right;}
</style>
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">Centered demo text</div>
</div>
By changing the container height and giving it some bottom padding, you can make the full box vertically centered.
Bonus demo
Change height: 70px; in .container to this:
height: 50px;
padding-top: 20px;
text-align: center needs to be set on the parent block, not the centered block, if you have display: inline-block.
Also vertical-align:middle; won't do you any good, unless you're in a table cell (or a div styled like one). If you want "real" vertical centering on IE7+ use good ol' tables, in conjnction with vertical-align: middle. Or just fake it with margins.
For .iconsleft and .iconsright use you might want to try floats, or position: absolute;
CSS:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
margin:auto;
text-align:center;
}
.text {
font-size:18px;
margin-top: 22px;
}
.iconsleft, .iconsright {
margin: 20px 10px 0;
}
.iconsleft {
float: left;
}
.iconsright {
float: right;
}
HTML (floats need to be written before the content):
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="text">centered text</div>
</div>
Demo with vertical and horizontal align.
I used a simple grid system to align everything up - CSS:
.grid {
width:200px;
height:70px;
float:left;
}
HTML:
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
<div class="grid text">centered text</div>
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
I know this may not be the the perfect way but I think this hack might help:
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright, .text {
display:inline-block;
margin-top:20px;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
I have 2 DIVs:
<div id="sidebar"></div>
<div id="content"></div>
How would i make the sidebar div stretch the same height as the content.
Thanks for any help.
UPDATE:
Here is my example code with other elements:
http://tinkerbin.com/tkp2FZLZ
it has a content DIV in the Middle and 4 divs that makes border which is a different color.
You can easily get your desired results through display:table-cell;
HTML
<div id="sidebar">sidebar</div>
<div id="content">content</div>
CSS
#sidebar {
display:table-cell;
width:100px;
background:red;
}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}
i think you are looking like this ;-
http://tinkerbin.com/yqyX3mXg
try this
#sidebar { position: relative; }
#content { position: absolute; top: 0; bottom: 0; right: 0; }
<div id="sidebar">
<div id="content">
</div>
</div>
Use display: table-cell on both column.
That will (visually! and visually only. It's CSS) make them behave the same way as th/td cells. You can add table-layout: fixed; display: table on parent and some width on one or both columns to use the other table algorithm, the one that doesn't try to adapt to content but try to respect the widths YOU want.
HTML:
<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>
CSS:
#sidebar, #content {
display: table-cell;
}
EDIT: compatible with IE8+
You'll have to use inline-block for IE6/IE7 ... that they don't understand (ha!). display: inline; zoom: 1 is the alternative for them, or you can also float these columns and use a technique named faux-column (tl;dr the background is on the parent and it's a visual fake, it appears to be on each column but it isn't)
EDIT2: vertical-align: top is also often required for such layout columns.
Set the same height for them, you could possibly even give them a float.
By the way you have a bug in your html, write it like so:
<div id="sidebar"></div>
<div id="content"></div>
And the css:
#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}
#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}
Example
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.