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
Related
I have a box that has 3 divs in it. I made a picture below, the two outside divs I have set widths that I need them to be but the middle div I want to be fluid and fill to what ever the remaining width is.
The code for this will be used on different pages that have different width's so I would like the middle to always adjust based on to fill the remaining width.
The way to do this with out breaking a line is to use display: table-cell. To assure the spacing will work properly you should wrap the divs in a container and set a max-width on the container. Then find the remaining width of the middle box: 65+185 = 250. 800 (my max-width example) - 250 = 550. 550/800 = 68.75%. Set that percentage as the middle box and it will be completely fluid. Box 3 won't break to the next line no matter how small the browser gets.
FIDDLE
CSS
.container{
max-width: 800px
}
.box1{
width: 65px;
height: 50px;
background: black;
display: table-cell;
vertical-align: top;
}
.box2{
width: 68.75%;
height: 50px;
background: green;
display: table-cell;
vertical-align: top;
}
.box3{
width: 185px;
height: 50px;
background: yellow;
display: table-cell;
vertical-align: top;
}
HTML
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
Possible solution:
This is the css
main { width:100% }
left {
display:inline-block;
width: 65px;
height: 291px;
background-color:#0000ff;
}
middle {
position:absolute;
display:inline-block;
background-color:#ffff00;
height: 291px;
margin-right:185px
}
right {
float:right;
height: 291px;
background-color: #ff0000;
width: 185px;
}
And the html:
<div class="main">
<div class="left"></div>
<div class="middle">
blablabla
</div>
<div class="right"></div>
</div>
You can find a working sample here: http://jsfiddle.net/mLJLr/1/
Use this css:
#left {
float:left;
width:65px;
background-color:#ff0000;
}
#center {
float:left;
width:100%;
max-width: initial;
background-color:#00AA00;
}
#right {
float:right;
width: 185px;
background-color:#00FF00;
}
And this Html:
<div id="center">
<div id="left">
left
</div>
center
<div id="right">
right
</div>
</div>
Test Online: http://jsfiddle.net/9PFPm/
I'm a newbie into web designing and I am already stuck. I am using Joomla to make a website and I am trying to make divs as shown below
I saw codes that could do this by setting width in %.
What I want to do is
• Div 1 can be as wide as its contents (picture mostly) <br>
• Div 2 is the header and is usually single line <br>
• Div 3 is the body and no matter how long it is, it should not come below Div 1. So basically Div 1 should be as long as the container.
This is probably a very silly question but I have no idea how to do this.
Thank you for your time in advance.
I would not allow the sidebar to be as wide as the content. If you have images, make images fill a defined width (even if you have it be a proportion of the page, in %). The risk with this is that if your image is wider it will affect your page design.
Here is a quick example of what you are trying to achieve:
<html>
<head>
<style>
div{
display:block;
margin:0;
padding:0;
}
#div1{
float:left;
width:30%;
padding: 1%;
border:1px solid black
}
#div2{
float:right;
width: 64%;
padding:1%;
border:1px solid red
}
#div3{
float:right;
width: 64%;
padding:1%;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="div1">div 1<br />This is your sidebar</div>
<div id="div2">div 2 <br /> This is your header line</div>
<div id="div3">div 3 <br />This is your body container</div>
</body>
</html>
Define width of your div's in px or em as you want multiple div section across your web page.In initial stages of web development, adjust everything in % is quite tricky.
For alignment you can refer float property of css http://css-tricks.com/all-about-floats/
With percentages: http://codepen.io/anon/pen/wEcse
percentage-based lay-out
html,body {
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
max-width: 1140px;
margin: 0 auto;
}
.inner {padding: 20px 10px;}
.left {
float: left;
width: 25%;
}
img {
max-width:100%;
height:auto;
}
.main {
float: right;
width: 70%;
margin-left: 5%;
}
.header h1 {margin: 0;}
.content {
margin-top: 10px;
}
For images to take the full available space you can do:
img {
max-width:100%;
height:auto;
}
Pixel lay-out
http://codepen.io/anon/pen/gGapt
CSS
html,body {
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
width: 990px;
margin: 0 auto;
}
.inner {padding: 20px 10px;}
.left {
float: left;
width: 200px;
}
.main {
float: right;
width: 700px;
margin-left: 10px;
}
.header h1 {margin: 0;}
.content {
margin-top: 10px;
}
HTML
<div class="container">
<div class="inner">
<div class="left">I am the left side.</div>
<div class="main">
<div class="header">
<h1>I am the header</h1>
</div>
<div class="content">I am the content</div>
</div>
</div>
</div>
how can i align my paragraph as shown in the following image
.
I need to show a newspaper kind of thing in which this should be included.
The following is the html code i'm using
<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>
and the css code is this
*{
margin:0;
padding:0;
}
.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}
.myImage img{
width:100px;
height:100px;
}
.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}
Create the image element on the left side, floating to the right of the text. Misplace it to the right, half the image's width with "margin". Then, on the right div, create the same effect using a blank div, but inverted. Float the div to the left side of the text and misplace it to the left by half the width. Like this:
<style>
.right, .left
{
width: 200px;
height: 300px;
float:left;
}
#real-img
{
width: 100px;
height: 100px;
float: right;
margin-right: -50px; /* half the width */
margin-top: 125px; /* vertical align considering page height minus img half height */
}
#fake-img
{
width:100px;
height:100px;
float:left;
margin-left: -50px;
margin-top: 125px;
}
</style>
And the html:
<div class="left">
<img src="imgurl" id="real-img" />
[CONTENT_TEXT]
</div>
<div class="right">
<div id="fake-img"></div>
[CONTENT_TEXT]
</div>
All of this, of course, considering you hard-code all the sizes.
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
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.