2 of them should be on the same line and the next div should fall just below them, while both 3 divs centered in the middle of the wrapper. I am targeting a register and login then a search box below both of them
my html is
<div id="wrapper">
<div id="reglog>
Register
Login
</div>
<div id="search">Quick Search</div>
</div> <!--End of wrapper-->.
my css is
#wrapper{
float:right;
max-width:380px;
text-align:center
}
#reglog{
display:inline-block
}
I was hoping that not giving any style to id=search, it will just fall below the reglog block...
Any help on why I cant get this to work?
Thanks
Michelle
Just use display:block; instead of inline-block. Check updated snippet below..
#wrapper{
float:right;
max-width:380px;
text-align:center
}
#reglog, #search{
display:block;
}
<div id="wrapper">
<div id="reglog>
Register
Login
</div>
<div id="search">Quick Search</div>
</div> <!--End of wrapper-->.
I recommend to use display:flex; and specify the flex direction you want using flex-direction: row | row-reverse | column | column-reverse;
Also you should attach these CSS properties to a <div></div> which contain all of your three divs.
You can find all information about this here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I am trying to place three divs side by side and
fourth div in the next row. I used float:left and width:33%.
What else property I need to apply to achieve this?
https://jsfiddle.net/wdvpubau/
Edit: One more thing regarding the same css styles,
I made property display:inline within css .divinline , but there is no difference in rendering. I had learnt that display:block will occupy the entire row. Is it being overridden?
Another way is as below
<div>
<div style="float:left;width:100px">1</div>
<div style="float:left;width:100px">2</div>
<div style="float:left;width:100px">3</div>
<div style="float:left;width:100px">4</div>
</div>
As rightly suggested by #Imran, you need to remove the . before the css class names while you use them in html. Try:
.divinline{
display:block;
float:left;
width:33%;
}
.maindiv{
display:block;
}
<div class="maindiv">
<div class="divinline"> <!-- here the class is class="divline" and not .divline -->
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
</div>
Fiddle here : https://jsfiddle.net/nithin_krishnan/r0Lyydg8/
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;
}
Here's a js fiddle of what I currently have, I am trying to make it so the boxes all fit within one line and there's a scrollbar that let's people scroll horizontally rather than having the boxes do what they're doing now.
Also, if anyone could get the class panel-body to fill 100% to the height of the page, that'd be awesome ;D
This is using Bootstrap 3.0.2, so the panels are pulled from that.
http://jsfiddle.net/Y55af/
Sample css:
.mainContent{
padding:20px;
}
.workplace_outter{
width:100%;
overflow-x:scroll;
}
.workplace_inner{
width:2000px;
}
.workplace_outter .panel{
width:300px;
margin-right:5px;
display:inline-block;
}
Sample HTML:
<div class="mainContent">
<div class="workplace_outter">
<div class="workplace_inner">
<div class="panel panel-default">
<div class="panel-heading">
Item
</div>
<div class="panel-body">
Item Body....
</div>
</div>
</div>
</div>
</div>
I don't quite understand what you mean by "get the white portion of the boxes to fill vertically", but since the panels are already inline-block elements, you can replace the width specification on their container with white-space: nowrap which will prevent any inline or inline-block elements from wrapping onto a second line.
Here's an updated fiddle, and the relevant code changed:
.workplace_inner{
/* width:2000px; (don't need anymore) */
white-space: nowrap;
}
jsFiddle: http://jsfiddle.net/2CRZP/
I want to put the grey box in the middle of the screen using vertical-align:middle or something (CSS).
<div class="container-fluid">
<div class="hero-unit">
<h1>Test</h1>
<p>stackoverflow</p>
<p>
<div class="row-fluid">
<div class="span2">BASE CSS</div>
</div>
</p>
</div>
</div>
http://jsfiddle.net/2CRZP/2/
You have to put this:
.container-fluid {
position:absolute;
top:50%;
margin-top:-160px;
}
In the margin-top you have the half of the height div in negative. (If you edit it)
And vertical-align:middle its only for TD tables. ;)
You mean the green box ?! I don't see any gray box
If you want to use vertical-align with divs, try the display:table-cell;
http://phrogz.net/css/vertical-align/
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}