I'm looking to create something like the image shown:
I have managed to get the #wrap centred horizontally, but that's about it...
any help would be much appreciated.
<style>
#wrap
{
Margin-left:auto;
Margin-right:auto;
padding: 10px;
}
#content
{
padding: 10px;
}
</style>
~~~
<body>
<div id="wrap">
<div id="content">
1
</div>
<div id="content">
2
</div>
<div id="content">
3
</div>
</div> <!--end wrap-->
</body>
Since you're working with block elements (https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements) you need the inner elment to have a fixed height so that you can give position: absolute. Additionally, keep in mind that the ID of an element has to be unique. If you want to use an element mulitple times assign a class name, e.g.
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
So, for the whole matter have a look at http://jsfiddle.net/YFncP/253/
Hope this helps.
Related
I'm going for three columns (I didn't want this originally but it looks best for my project). The right-hand one is insisting on staying below the middle one even while it floats on the right. What should I change?
The whole thing will actually be put inside another div, but that doesn't seem to be relevant. I've simplified the code down to the problematic area:
<style>
.contain {
border:1px solid;
width:639px;
height:500px;
}
.subAreaLeft{
float:left;
position:relative;
width:205px;
border:1px solid;
}
.subAreaMid{
margin: 0 auto;
position:relative;
width:205px;
border:1px solid;
}
.subAreaRight{
width:205px;
position:relative;
float:right;
border:1px solid;
}
</style>
</head>
<body>
<div class="contain">
<div class="subAreaLeft" id="contactInfo">
ONE
</div>
<div class="subAreaMid">
TWO
</div>
<div class="subAreaRight">
THREE
</div>
</div>
</body>
In order for all three of the divs to float to the left, all three of the divs need float: left in the CSS.
<body>
<div class="contain">
<div class="subAreaLeft" id="contactInfo">
ONE
</div>
<div class="subAreaRight">
THREE
</div>
<div class="subAreaMid">
TWO
</div>
</div>
</body>
you just need to put middle DIV after the THird
http://jsfiddle.net/zJkHE/ check this
The solution is not to modify any CSS. Leave that alone.
Instead, move the subAreaMid div to directly after subAreaRight in the HTML.
<div class="subAreaLeft" id="contactInfo">
ONE
</div>]
<div class="subAreaRight">
THREE
</div>
<div class="subAreaMid">
TWO
</div>
This ensures that the subAreaMid div will not clear, and gives the desired result.
Here is what I want to do;
Pinterest
Let's say I have 10 or more rectangular divs. I want to put those divs 5 of them side by side and the other 5 of them are under the others. My question is;
How should I name the divs ? Should the class name change for every div or the IDs change or Should I give;
float:left
attribute to all divs to let them align side by side. So the other five will be placed under them when there is no place horizontally.
I mean how should the structure of these 10 divs (or more) be ?
You may find the Wookmark JQuery pluggin useful. Its like Masonry but I think its easier. Put all your images inside a div, reference it in the <script></script> and it will basically give the same effect as Pininterest.
If you use class you can use it for several objects without changing the name.Try this:
<style>
.container {
overflow:auto;
}
.sidebyside {
float:left;
width:100px;
height:100px;
border-style:solid;
margin:5px;
}
.belowdiv {
width:300px;
height:100px;
border-style:solid;
margin:5px;
}
</style>
<div class="container">
<div class="sidebyside">div0</div>
<div class="sidebyside">div1</div>
<div class="sidebyside">div2</div>
<div class="sidebyside">div3</div>
<div class="sidebyside">div4</div>
</div>
<div class="belowdiv">div5</div>
<div class="belowdiv">div6</div>
<div class="belowdiv">div7</div>
<div class="belowdiv">div8</div>
<div class="belowdiv">div9</div>
What you can do is to create a container for all of the divs. And the add the 10 divs under them.
<div id="divContainer">
<div class="theDiv">
//Div content 1
</div>
<div class="theDiv">
//Div content 2
</div>
<div class="theDiv">
//Div content 3
</div>
<div class="theDiv">
//Div content 4
</div>
<div class="theDiv">
//Div content 5
</div>
<div class="theDiv">
//Div content 6
</div>
<div class="theDiv">
//Div content 7
</div>
<div class="theDiv">
//Div content 8
</div>
<div class="theDiv">
//Div content 9
</div>
<div class="theDiv">
//Div content 10
</div>
</div>
And after that you add the styling.
First, set a width to the divContainer, lets say the container is 1000px and each div inside is 200px.
Second, you add the float property.
Something like.
<style>
#divContainer {background: blue; width: 1000px; float: left;}
.theDiv {background: pink; float: left;}
</style>
And then after that you can offcourse more properties to make it look better like margins and so on.
Hope this helps you =)
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I'm trying to position two panels and just can't get it to work...
I have a container-page wrapping two panels, each with it's own page. I want to position the panels side by side using float.
This is my CSS:
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: static;}
and HTML
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
</div>
I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.
Any hints on what I may be doing wrong?
Thanks!
div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.
On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: relative; float: left;}
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div style="clear:left;"></div>
</div>
Try floating both of the panels? As of right now only the left one is floated... try floating both of them to the left and then putting the correct amount of margin between them to line them up like you want them. Or even floating one left and the other right would probably work.
Add this to your CSS,
div.clear-both {clear: both;}
And change your HTML to this:
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page"
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div class="clear-both"></div>
</div>
I have markup that looks like this
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.
If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.
One way is to add a right padding to the div with the size of the logo:
<div style="padding-right: 50px;">
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
<div>
Content goes here
</div>
Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.
<h1 style="position: absolute; width: 100%; text-align:center;">
Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
Content goes here
</div>
Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.
So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"
<div>
<h1 style="text-align:center;">Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="
text-align:center;
margin-left:auto;
margin-right:auto;
width:50%;
">Heading 2</h1>
</div>
<div style="clear:both;">
Content goes here
</div>
I know i am late for the party, but for future readers I found a different approach for that problem.
use 3 div elements (left div,middle div, right div) inside a flex displayed div container.
make the left and right div the same relative width (in %) and float each one of the to his side.set the middle div width with reminder of 100% - (left div + right div).
locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'.
check this example. also here is a Plunker .
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
#editorheader {
display:flex;
}
#leftheaderdiv {
float:left;
width:20%;
background-color:gray;
display:inline-block;
}
#middleheaderdiv {
float:left;
width:60%;
background-color:red;
display:inline-block;
text-align: center;
}
#rightheaderdiv {
float:right;
width:20%;
background-color: gray;
}
</style>
</head>
<body>
<div class="subheader" id="editorheader">
<div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
<div id="middleheaderdiv">I AM IN THE MIDDLE</div>
<div id="rightheaderdiv"></div>
</div>
</body>
</html>
If you are really using logo image then you might try this solution:
<div>
<img style="float:left;" src="logo.jpg"/>
<h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1>
</div>
where -100px replace with half of yours image width.
edit:
idea with absolute position from littlegreen's answer is working. Check it:
<div style="position:relative;">
<img style="float:left; position:absolute;" src="logo.jpg"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
This most simple solution:
<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>
= the logo width