I'm having some trouble finding the way to create 3 DIVs side by side, where the middle DIV has a static size (let's say 900px), and the ones on the left and right side have auto-adjustable widths.
I need to do this in order to put backgrounds on the side DIVs, because the middle div already has a transparent background, so I cannot create a wrapper DIV for the middle one holding the other background. As you might imagine, you'll be able to see through the middle DIV's background.
Any ideas? :)
Is this you want?
HTML:
<div class="wrapper">
<div class="side" style="float:right;width:50px;">side</div>
<div class="side" style="float:left;width:50px;">side</div>
<div class="middle" style="margin:0 50px;">content middle</div>
<div style="clear:both; height: 40px;"></div>
<div id="container">
<div class="left">side</div>
<div class="center">center</div>
<div class="right">side</div>
</div>
</div>
CSS:
.wrapper {
max-width: 1000px;
}
.side, .middle {
text-align: center;
}
.side {
background: red;
}
.middle {
background: blue;
color: white;
}
#container {
display: table;
width: 100%;
}
.left, .center, .right {
display: table-cell;
text-align: center;
background: red;
}
.center {
width: 500px;
background: blue;
color: white;
}
jsfiddle
I am guessing you need a website with 3 columns where the left one is the menu, the middle has the content and the right one has room for advertisement or additional information.
I would go for something like:
<div class="side" style="width:10%; float:left;">content</div>
<div class="middle" style="width:900px; float:left;">content middle</div>
<div class="side" style="width:10%; float:left; clear:both; ">content</div>
Depending on size and placement use the side classes for the sidebars and the middle class for your main content.
Related
I have three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?
I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
How do i push my content down once i do (ctrl + mouse scroll) to zoom in , and the content center it self right away.
So i have #div left #div right both beside each other, and once it zooms, #div left will push down #div right ,and #div right will center it self right away.
Here is my jsfiddle sorry please copy and paste http://jsfiddle.net/Tedeee/bBpEm/
HTML
<div id="top">
<br />
hi
</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div {
outline: red 1px solid
}
#right {
width: 200px;
height: 200px;
float:left;
background-color:red;
}
#left {
width: 200px;
height: 200px;
float:left;
background-color:grey;
}
#outer {
float:left;
clear:both;
text-align: center;
}
Sample website
Try look at the home-section https://coderwall.com/welcome
As you can see once my div got pushed down the # right div wont move to center.
and also i need to center it once it is pushed down.
How do i do this, i really need help. Thanks.
Try displaying your divs as inline-block.
Updated JSFiddle
This comes with some caveats. inline-block elements will have whitespace surrounding them, and there are fixes for that. My preferred method is to add margin-right: -0.36em; to the inline-block elements. There are other fixes you can look up too.
Basic structure is as follows:
HTML
<div id="top"> <br />hi</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div { outline: red 1px solid }
#outer {
text-align: center;
}
#right {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
#left {
width: 200px;
height: 200px;
display: inline-block;
background-color:grey;
}
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
i'm attempting to create an header which is divided into 3 divs
they will all be set to display: inline-block
the left header part will contain a slogan and a logo which i wan't the slogan to be at
the right of the logo
the problem is my logo div and my slogan div are always placed one on top of the other .
to my understanding an inline element would be placed next to the last inline element
with in the same block , notice that the header-left div has 250px width and each of the
child div's have 100px width so why are they not placed one next to the other ?
my markup :
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
my css :
div#header
{
border: 1px solid black ;
height: 200px;
}
div#header div#header-left
{
display: inline-block;
height: 100%;
width: 250px;
}
div#header div#header-left div#logo
{
display: inline-block;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
display: inline-block;
height: inherit;
width:100px;
}
everything's fine. just close the logo's <div> properly. "self-closing" tags.
<div id="header">
<div id="header-left">
<div id="logo"></div>
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.
It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:
div#header div#header-left div#logo
{
float: left;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
float: left;
height: inherit;
width:100px;
}
And you nead a clear in your html/css:
.clear_left { clear: left; }
And the html:
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan"><span> Buy For U</span></div>
<div class="clear_left"></div>
</div>
</div>