Html <div class="row"> not centering - html

First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.

First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.

So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}

Related

DIv inside my Bootstrap div will not right align (but text does)

I am trying to align two divs, each of which are inside Bootstrap column divs. I want to align the one in the first column to the right, and the one in the second column to the left. The divs inside are positioned relative, so that content inside them can align absolutely. But even removing that positioning didn't fix my issue. I can't figure it out, because it works on teh plain text i place inside the columns/divs, just as a test, but not on the divs.
Here is my html:
<div class="container">
<div class="row">
<div class="leftFeature col-md-6">TESTTEXT<br>
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
<div class="rightFeature col-md-6">TESTTEXT<br>
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
</div>
</div>
Here is my css:
.leftFeature {
background-color:#F9D069;
text-align:center!important;
}
.rightFeature {
background-color:#B6DEFF;
text-align:center!important;
}
.col-sm-6 {padding:0;}
.blockFeature {
width:80%;
background-color:#7F9FA1;
background-size:100%;
line-height:0;
position:relative; /*removing this rule did not fix my issue */
}
.blockFeatureOverlay {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.25);
/*background-color:rgb(158,84,6, 0.25);*/
}
.blockFeature a {
text-decoration:none;
}
.blockFeature img {
width:100%;
height:auto;
}
.blockFeatureText {
position:absolute;
bottom:20px;
left:20px;
}
.blockFeatureText h2 {
font-size:2.4em;
font-weight:700;
color:#fff;
text-transform:uppercase;
margin-bottom:10px!important;
line-height:100%!important;
text-align:left;
}
.blockFeatureText h3 {
font-size:1.2em;
font-weight:300;
color:#fff;
text-transform:uppercase;
margin-bottom:0!important;
line-height:100%!important;
text-align:left;
}
And this is a representation of what i am getting: http://imgur.com/a/LekqV
but this is what i want: http://imgur.com/a/ER1kB
It's probably (hopefully) something really obvious. But after 24 hours of messing around, I cannot seem to fix it. I have tried adding text-right or pull-right class on the left hand div, but it either does something different than I need, or doesn't work at all.
thank you for anyone who can maybe help me out?
EDIT: Here are two fiddles i created
forked from a fiddle where someone seemed to have already created the bootstrap environment: https://jsfiddle.net/Katrina_B/w4dt8qq7/
one with no bootstrap, in case the above is not correct, and someone knows better how to add bootstrap to it: https://jsfiddle.net/Katrina_B/c4kxa06s/
I am completely new to Bootstrap, and rarely use Jfiddle, so apologies if i have done this incorrectly. In any case, in neither example, are the divs doing what i expect or wish them to do.
simple you should use bootstrap pull-left and pull-right class to align your divs
<div class="leftFeature col-md-6 pull-left">TESTTEXT<br> .... </div>
<div class="rightFeature col-md-6 pull-right">TESTTEXT<br>....</div>
.leftFeature .blockFeature {
float: right;
}
This style may keep your complete div in right
Below the div with the class col-md-6 you can use bootstrap again. Try adding a div with class="col-md-10 col-md-offset-2" for the left side, and on the right side class="col-md-10"
<div class="container">
<div class="row">
<div class="leftFeature col-md-6">TESTTEXT<br>
<div class="col-md-10 col-md-offset-2>
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
</div>
<div class="rightFeature col-md-6">TESTTEXT<br>
<div class="col-md-10">
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
</div>
</div>
</div>
You should use bootsrap predefined pull-left and pull-right class to positioning div left and right. This could work for you.
Or you can use css float: left and float: right property.
Example:
.leftFeature {float: left;} and .rightFeature {float: right}

Create thee divs in one line and 4th div in bottom. CSS/HTML

I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.
You really should post your code to see whats wrong with it.. But i made the example for you.
Here you go, you could use float.
Html Code:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css Code:
#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}
Working DEMO
Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.
<div class="left">
1
</div>
<div class="right">
<div class="second-third-wrapper">
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
<div class="fourth">
4
</div>
</div>
http://jsfiddle.net/Pb5NX/2/
The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.
body, html {
width: 100%;
height: 100%;
}
.left {
background-color: blue;
width: 50%;
height: 100%;
float: left;
}
If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.

Cannot center div tried floating to left text align margin:auto just wont work

Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.

Why is there a gap between those 2 divs

http://jsfiddle.net/D9gnP/110/
Between both columns is a little gap.From where is that gap coming I have set nothing?
Has this todo something with the display:inline-block on those elements? Do they have internal margin?
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%; background-color:green;">
<div style="background-color:#ff99cc; height:25%;">1</div>
<div style="background-color:#ff33cc; height:50%;">2</div>
<div style="background-color:#ff66cc; height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%; background-color:violet">
<div style="background-color: orange;height:50%;">Total</div>
<div style="background-color: blue;height:50%;">Test</div>
</div>
</div>
</div>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
text-indent:-0.5em;;
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;
}
As the elements are inline they are treated as such, including spaces due to white space.
Try removing the white space between the elements (including new lines).
<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>
<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->
You can also add this to the container element to adjust:
word-spacing: 0;
alternatively you can just use floated elements :)
see here, works as expected if you just remove the whitespace: http://jsfiddle.net/D9gnP/121/
I think the whitespaces in your HTML markup - the indents between your tags - get interpreted by the browser. I had similar problems once while designing a horizontal navigation band.
Unfortunately, the only solution I found besides a completely different layout is writing your HTML markup without any whitespaces, which can get quite ugly.
Paste this code for your html:
<div id="wrapper" style="background-color:yellow;height:100%;">
<div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div><div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div>
</div>
notice that the 2 divs have nothing in between them in the source code.ex:
<div>data</div><div>data</div>
It is because of the white space in your HTML.
Try removing the break between the two column-divs and it's gone, or try this solution:
How to remove the space between inline-block elements?

How can I increase the height of a span to a different row?

I know the title doesn't make sense but I don't know how to put it.
Take a look at this: http://jsfiddle.net/nr33k/embedded/result/
I want to increase the height of the well on the right to match the height of the two wells on the left together, so it looks like I have three small wells in one large rectangle. If I try to increase the height the obvious way by adding height:150px it causes the bottom well on the left to fall down. How do I solve this?
Please try to float:left; your row class and then set the height of the span on the right.
.row {float:left;}
Here's a working sample http://jsfiddle.net/BUgQc/
The issue is that the first two ''wells'' are in a row, while the third is in another row.
Try this:
<div class="row">
<div class="span4">
<div class="well well-small" style="height:50px">
<p>hello</p>
</div>
<div class="well well-small" style="height:100px">
<p>hello again</p>
</div>
</div>
<div class="span8">
<div class="well well-small" style="height:190px;">
<p>hello one more time</p>
</div>
</div>
</div>
Make the left side two DIV's in one single DIV and float it left and make the Right side bigger Well div in a single DIV and float if left.... hope this will help for you....
Check this example. Hope it helps
HTML
<div id="container2">
<div id="container1">
<div id="col1" style="height:250px">
<!-- Column one start -->
<h2>Equal height columns</h2>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h3>Mac</h3>
<!-- Column two end -->
</div>
</div>
</div>​
CSS
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}​
DEMO
Source link