This is what I want:
I tried this approach with no luck (gotten from here). This is the unwanted result:
I guess it doesn't work because I'm using Twitter Bootstrap and span:
<div id=containerOfButtonAndInput class="container span12">
But how could I do it then?
Why don't you use CSS? Use something like this:
<div id="outer-container">
<div id="container">
<div id="label">Your Label<input id="input" /></div>
<div style="height:10px"> </div>
<div id="button">Your Button</div>
</div>
</div>
CSS:
#outer-container{
padding: 20px 20px 20px 20px;
width:500px;
height:200px;
background-color:#eee;
}
#container{
width:300px;
height:100px;
margin: 0 auto;
background-color:#ccc;
}
#label{
float:right;
}
#button{
float:right;
}
No magic here. Just regular formatting. Just don't be afraid of div-tags. Maybe you need more containers around your mask.
See the fiddle: http://jsfiddle.net/Ahg5c/1/.
Related
I'm trying to get some floated elements to appear outside of a container on a drupal page that is using a theme based on Omega. my page is currently structured as such:
<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
<div class="container-12">
<div class="pricing-main-background">
<div class="grid-4 plan-box-orange">
</div>
<div class="grid-4 plan-box-green">
</div>
<div class="grid-4 plan-box-orange">
</div>
<div class="pricing-subtext">
some more text down here
</div>
</div>
</div>
</div>
Here's a sketch of what I'd like to accomplish (notice the smaller boxes outside of the container):
Visual Aid
Can anyone help provide a way to make this work (preferrably that doesn't require a mess of CSS when the boxes stack (at 480px)?
Something like this?
h2
{
width:60%;
border:1px solid black;
border-bottom:0;
margin:0 auto;
text-align:center;
}
.grid-12
{
width:60%;
border:1px solid black;
margin:0 auto;
text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
display:inline-block;
width:30%;
height:50px;
margin-top:25px;
}
.grid-4:nth-of-type(1)
{
position:absolute;
left:-10%;
}
.grid-4:nth-of-type(3)
{
position:absolute;
right:-10%;
}
I think it's my lack of css knowledge, but i don't get this thing working. My purpose is to have a container div which have the MAXIUMUM witdh of 800px and aligned in the middle of the page, with one or two elements per 'row', depending on the available screen-space. But in the example you see that the whole 800px is taken. How to accomplish that the 800px is only the max?
HTML:
<div style="background-color:red;max-width:800px;display: inline-block">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
CSS:
.contentgedeelte {
width:310px;
background:white;
margin:10px;
float:left;
border-radius:5px;
padding:5px;
}
http://jsfiddle.net/plunje/LmJSy/
OK, here you go:
#container {
width:800px;
margin:0 auto;
text-align:center;
}
.row {
display:inline-block;
background:red;
margin:0 auto;
}
.contentgedeelte {
width:310px;
background:white;
margin:10px;
border-radius:5px;
padding:5px;
display:inline-block;
text-align:center;
}
You'll need to add a .row element to wrap your contentgedeeltes in pairs (if that's how you want them displayed). To be honest you're better off just calculating the widths properly, but if you really can't, try this. Also, I've taken your container element, remove the inline styling and added the ID #container.
Use display: block; instead of inline.
Inline-block is for elements which line up side by side, not for pagewraps. If this is a center of the page container there is no need to display inline.
If you want the articles to display as inline elements, that seems to work.
Or just tally your styles to add up to 400px instead of 340px.
You need a little more structure. See below.
HTML
<div class="container">
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
max-width: 800px;
background-color: red;
padding: 1em;
overflow: hidden;
}
.contentgedeelte {
width:48%;
background:white;
margin:1%;
float:left;
border-radius:5px;
padding:5px;
display: block;
}
I have a wrapper. Inside that wrapper I have 3 divs. I would like #contentOne standing above #contentTwo and contentThree standing on the right side of those two. I am sure someone can help. Thank you in advance for your replies. Cheers. Marc. (This positioning thing is killing me....)
http://jsfiddle.net/Qmrpu/
My HTML:
<div id="wrapper">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
<div id="contentThree" class="content">contentThree</div>
</div>
My CSS:
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;}
Can you put them in floated column wrappers?
<div id="wrapper">
<div id="column1" class="column">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
<div id="column2" class="column">
<div id="contentThree" class="content">contentThree</div>
</div>
</div>
CSS:
.column {
float: left;
}
http://jsfiddle.net/xbcxs/
That's how I would've done it. Notice the position:relative on the wrapper div and position:absolute; right:0; on the third div.
http://jsfiddle.net/remibreton/7javg/
HTML is lacking in providing functions for vertical positioning. They are getting better with newer display values, but you need to limit your audience to only modern browsers. Barring that you need to change the order of the HTML to get the vertical position you want. In this case if you put the 3rd section at the top and gave it a float:right you get what you are after.
http://jsfiddle.net/Qmrpu/1/
Why not use a table for layout?
http://jsfiddle.net/Qmrpu/3/
try this:
<div id="wrapper">
<div id="contentThree" class="content">contentThree</div>
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;
float: right;
}
I have a full screen lay-out and what I want is 3 colums with the same width and left floating.
What i have is this:
<div class="table_small" style="float:left; margin-right:20px;">
<p>lipsum</p></div><div class="table_small" style="float:left; margin-right:20px;">
<p>lipsum</p></div><div class="table_small" style="float:left;"><p>lipsum</p></div>
One div without float and with width 100% works fine.
Is it not possible to do this with divs? Do I have to use a table for this?
You need one div with its display set to table wrapped around your ps.
HTML
<div class="table_small">
<p>lipsum</p>
<p>lipsum</p>
<p>lipsum</p>
</div>
CSS:
.table_small
{
width: 100%;
display: table;
}
.table_small p
{
display: table-cell;
border: 1px dashed #000;
}
The parent element <div class="table_small"> must have a set width for this to work.
Demo for you here.
<div class="row">
<div class="column1" style="float:left; left:0px; width:33%"></div>
<div class="column2" style="float:left; left:33%; width:33%"></div>
<div class="column3" style="float:left; left:66%; width:33%"></div>
</div>
Try this code may be can helpful to you. You can modify style properties as per your need.
<html>
<body style="width:100%; margin:0px;">
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;">
<p>lipsum</p></div>
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;">
<p>lipsum</p></div>
<div class="table_small" style="float:left; margin:0 10px; border:1px solid;width:31.7%;"><p>lipsum</p></div>
</body>
</html>
Thanks.
I want to develop some kind of utility bar. I can position each element in this bar side by side using float:left;
But I want the second element to be positioned at the very right of the bar. This is hard for me because the width of the bar is not static.
Have a look at my demo: http://jsfiddle.net/x5vyC/2/
It should look like this:
Any idea how to achieve this using css?
Is this what you wanted? - http://jsfiddle.net/jomanlk/x5vyC/3/
Floats on both sides now
#wrapper{
background:red;
overflow:auto;
}
#c1{
float:left;
background:blue;
}
#c2{
background:green;
float:right;
}
<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
Just wanna update this for beginners now you should definitly use flexbox to do that, it's more appropriate and work for responsive try this : http://jsfiddle.net/x5vyC/3957/
#wrapper{
display:flex;
justify-content:space-between;
background:red;
}
#c1{
background:blue;
}
#c2{
background:green;
}
<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
Use float: right to.. float the second column to the.. right.
Use overflow: hidden to clear the floats so that the background color I just put in will be visible.
Live Demo
#wrapper{
background:#000;
overflow: hidden
}
#c1 {
float:left;
background:red;
}
#c2 {
background:green;
float: right
}
if you don't want to use float
<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
<div style="">
<p> Hello </p>
</div>
I have one more solution other than float: right.
text-align: right;
padding: 10rem 3rem 2rem 3rem;
width: 58%;
align-items: end;
margin: 0px 0px 0px auto;
sometimes float does not work when we use width element for specific width at that time we can use the above code
This works for me.
<div style="position: relative;width:100%;">
<div style="position:absolute;left:0px;background-color:red;width:25%;height:100px;">
This will be on the left
</div>
<div style="position:absolute;right:0px;background-color:blue;width:25%;height:100px;">
This will be on the right
</div>
</div>