Why are my Columns not aligning correctly? There seems to be a gap above. Is there away that I can make them automatically set a width of the wrapper its in 892px;
http://jsfiddle.net/pJefg/
HTML:
<div class="leftColParts">
Text Left
</div>
<div class="rightColParts">
Text Right
</div>
CSS:
.leftColParts{
width:215px;
background-color:red;
}
.rightColParts{
float: right;
display: inline-block;
width:440px;
clear:both;
background-color: green;
}
Is this what you need?
http://jsfiddle.net/pJefg/7/
HTML:
<div class="wrapper">
<div class="leftColParts">Text Left</div><!--
--><div class="rightColParts">Text Right</div>
<div>
--
CSS:
.wrapper {
width: 892px;
}
.wrapper:after {
clear:both;
content: ".";
height: 0;
visibility:hidden;
}
.leftColParts {
float:left;
width:215px;
background-color:red;
}
.rightColParts {
float:right;
width:440px;
background-color: green;
}
.leftColParts{
width:215px;
background-color:red;
float: left;
}
.rightColParts{
float: left;
width:440px;
background-color: green;
}
Try this.
Alternatively this:
.leftColParts{
width:215px;
background-color:red;
display: inline-block;
}
.rightColParts{
display: inline-block;
width:440px;
clear:both;
background-color: green;
}
I have edited the fiddle with what I think it is that you want.
What I've done:
Floated both divs left
Added a div with a clearfix (clear: both;)
You can check it here: http://jsfiddle.net/pJefg/2/
Related
I have tried the normal techniques for horizontally centering a div within a div. I must still be doing something wrong. Check out the following jsFiddle and help me center the depiction of a tank under the "Inner Level" heading. For convenience I have added a border to all the div tags.
jsFiddle Source
HTML:
<body>
<a href="#">
<div class="div-inline-block" style="text-align:left;width:150px;">
<h2>TEST</h2>
<p>A description</p>
</div>
<div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div>
<div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div>
<div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div>
<div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div>
</a>
</body>
CSS:
a{
text-decoration:none;
}
div{
border:1px solid red;
}
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
}
.tank-level-outer {
border:1px solid black;
width:25px;
height:32px;
display:table-cell;
vertical-align:bottom;
margin:0 auto;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
}
add this
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
margin:0 auto;
}
.tank-level-outer {
border: 1px solid black;
width: 25px;
height: 32px;
margin: 0 auto;
padding: 0;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
margin-top:7px;
display: table;
vertical-align: bottom;
}
Updated Fiddle
http://jsfiddle.net/czgoxafr/22/
Add this:
.tank-level-outer {
display: table;
margin: 0 auto;
}
change the css of div .tank-level-outer and add margin zero auto , remove display table-cell
.tank-level-outer {
border: 1px solid #000;
width: 25px;
height: 32px;
margin: 0px auto;
vertical-align: bottom;}
This works:
.tank-level-outer {
width:25px;
height:32px;
display:block; // not necessary since this class is applied to a div
vertical-align:bottom;
margin:0 auto;
}
try this:
//css
.firstDiv{
padding:25% 25% 25% 25%
height:400px;
width:400px;
background-color:red;
}
.secondDiv{
height:200px;
width:200px;
background-color:pink;
}
//html
<div class="firstDiv">
<div class="secondDiv">
</div>
</div>
Sorry if it is a duplicate of something, I have searched honestly, but I still have the problem which is shown in this fiddle: http://jsfiddle.net/tfvdzzee/1/
The code here:
html
<div id="wrap">
<div id="one">1</div>
<div id="two">2</div>
</div>
css
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one, #two
{
width: 50%;
background: green;
}
#two
{
float: right;
background: red;
}
I believe display: inline-block; is the best answer, as it prevents bugs of overlapping and overflowing, while also keeping its parent definitions.
JsFiddle Demo
HTML
<div id="wrap">
<div id="one">1</div><!--
--><div id="two">2</div>
</div>
CSS
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one, #two
{
width: 50%;
background: green;
display: inline-block;
/* If worried about IE7 and IE6, add the two next lines */
*display: inline;
*zoom: 1;
}
#two
{
background: red;
}
Demo Fiddle
You need to both float:left the #one element as well as set overflow:hidden to the parent to ensure it wraps the children correctly.
Change your CSS to:
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
overflow:hidden; /* <---ensure the parent wraps the children */
}
#one, #two
{
width: 50%;
background: green;
float:left; /* <---ensure the children display inline */
}
#two
{
float: right;
background: red;
}
Add the following style in your CSS.
#one{float:left}
DEMO
Remove the Css property for #two and add this
#one, #two
{
width: 50%;
background: green;
float: left;
}
Use float: left and you don't need float: right for #two.
#one, #two
{
width: 50%;
background: green;
float: left;
}
#two
{
background: red;
}
Fiddle example.
You will need to float both your divs. After the float, clear the float using the clearfix class.
CSS:
#one, #two{ float:left; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
HTML:
<div id="wrap" class="clearfix">
<div id="one">1</div>
<div id="two">2</div>
</div>
DEMO
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#wrap:after{
clear:both;
content:"";
display:block;
}
#one, #two
{
width: 50%;
float:left;
background: green;
}
#two
{
background: red;
}
Try this and use clearfix on the :after pseudo element of your #wrap div.
DEMO
To Expand on the comment by sifu and answer the question in a choice of ways
The first method (Using float's)
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one,#two
{
float:left;
width:50%;
}
http://jsfiddle.net/tfvdzzee/7/
Display Inline-block method
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
font-size:0px;
}
#one,#two
{
width:50%;
display:inline-block;
font-size:16px;
}
http://jsfiddle.net/tfvdzzee/8/
Both methods can be used however if you are still developing for IE7 (not sure why you would) then method 2 wont work.
I have two divs side by side in a control (RadRotator).
<div class="title_link_Wrapper">
<div class="title">
<span><%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%></span>
</div>
<div class="link">
<span>Link</span>
</div>
</div>
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
}
It is working in JsFiddle
But is not working in the control:
Any hint?
You can use display:table;(parent div) and display:table-cell;(children div) which gives the same output and works most of the times:
CSS
.title_link_Wrapper {
width:550px;
display:table;
}
.title{
display:table-cell;
width: 100%;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
display:table-cell;
min-width:60px;
margin-top:6px;
}
Demo Fiddle
Seems like you forgot add float:left; to the div with class link.
i think you need this :
<div class="title_link_Wrapper">
<div class="title">LeftLeft
<span class="link">right</span>
</div>
</div>
css
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
float:right;
}
DEMO
Div by default is Display: Block, which causes an element to be alone on that line.
you will want to force your divs to be Display: Inline
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
display: inline; /* add this */
}
.link {
margin-top:6px;
display: inline; /* add this */
float: right; /* add this */
}
you may even want to wrap them in a div set to block.
Another thing that may happen is there is no specific width on .link, so if that gets wider than 20% you will spill over into the next row again, since you .title is set to 80%
I want to have something like this:
================================
====IMAGE==============TEXT=====
================================
and I used:
.menu {
background-color: red;
padding: 40px;
text-align: right;
}
.menu img {
float: left;
}
Result:
================================
=======================TEXT=====
====IMAGE=======================
How can I do this?
I think that you have to use line-height with height in your text and set a width to your menu, something like:
<div class="menu">
<div class="img">
<img src="http://placehold.it/350x50" />
</div>
<div class="text">
<p>your text</p>
</div>
</div>
.menu {
background-color: red;
text-align: right;
width:100%;
}
.menu img {
float: left;
}
.menu text {
float: left;
}
.text p{
height:50px;
line-height:50px;
}
DEMO
You would need the image to be first in the markup. Float will make inline items wrap around something, but only the inline items that come after it in the markup.
Elements are not getting exact float and width property.
.menu {
background-color: red;
padding: 40px;
float: right;
max-width: 40%;
}
.menu img {
float: left;
max-width: 60%;
}
Now try to wrap them and use
.wrapper {
display: inline-block;
}
Sorry but having difficulty in creating a group of div as attached pic..please help
http://imgur.com/J8psv
my biggest problem is having to get the divs arranged next to each other inside of parent divs. Infact to go to a next level, if there is a 5th div of 200px then I want it to automatically come to the second line.
I understand I need something to do with CSS, just that am not so well versed with it.
.div_main_left {
width: 800px;
border: 1px solid;
height: 600px;
float: left;
display: table-cell;
}
.div_sec_left {
width: 200px;
border: 1px solid;
height: 75px;
display: inline;
float: left;
}
.div_right {
width: 250px;
border: 1px solid;
height: 500px;
float: right;
display: table-cell;
}
You can do it like this:
HTML
<div id="mainwrapper">
<div id="leftwrapper">
<div class="topbox"></div>
<div class="topbox"></div>
<div class="topbox"></div>
<div class="topbox"></div>
<div id="maincontent"></div>
</div>
<div id="rightwrapper">
<div id="topsidebar"></div>
<div id="bottomsidebar"></div>
</div>
</div>
CSS
#mainwrapper{
width:1050px;
}
#rightwrapper{
width:250px;
float:left;
}
#leftwrapper{
width:800px;
float:left;
}
.topbox{
float: left;
width:196px;
margin-right:4px;
height:75px;
background-color:orange;
}
#maincontent{
width:100%;
height:675px;
background-color:blue;
clear:both;
}
#topsidebar
{
width:100%;
height:600px;
background-color:green;
}
#bottomsidebar{
width:100%;
height:150px;
background-color:red;
}
Here is the jsfiddle
Do it in a list then style the list itself. From: http://www.alistapart.com/articles/taminglists/
#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
You can start with this:
Fiddle Example
First the html:
<div id="container">
<div class="big_left">
<div class="float_parent">
<div class="small">200x75</div>
<div class="small">200x75</div>
<div class="small">200x75</div>
<div class="small">200x75</div>
</div>
<div class="content">
The Content;
</div>
</div><!-- Big left End -->
<div class="big_right">
<div class="right_long">
250x750
</div>
</div><!-- Big Right End -->
</div>
Then the css:
#container {
width:1065px;
}
.big_left {
width:810px;
float:left;
}
.big_right {
width:255px;
float:left;
}
.big_left .float_parent {
width:800px;
}
.big_left .float_parent .small{
width:200px;
height:75px;
float:left;
}
.big_left .content {
clear:both;
}
.big_right .right_long {
width:250px;
height:750px;
}