I have two div element inside main div element I want those two div float left and the align center of the main div.
Something like this.
[ main div [div1][div2] ]
I have successfully floated the two divs but I am failing to assign the space on both the side. I mean to say align them in center.
code to float left css
.container{
width:100%
height: auto;
}
.img{
width:auto;
height:auto;
float:left;
}
.data{
width:auto;
height:auto;
}
html code
<div class="container">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
if you write text-align:center to parent.It will align their children
thank you for comments
.container{
width:100%
height: auto;
text-align:center;
}
.data{
width:auto;
height:auto;
}
<div class="container">
<div class="img"><img src="https://picsum.photos/200/300"/></div>
<div class="data">data goes here</div>
</div>
You can wrap the img and data div in a div, then float that div right with a 50% width. I prefer not to use floats; flexbox would be a better option in my opinion, but if you like floats, I put some code below you can try.
HTML:
<div class="container">
<div class="dataImgContainer">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
</div>
Add below to the CSS sheet:
.dataImgContainer {
width: 50%;
float: right;
}
Related
I got a div which has the width of my screen. It has overflow: scroll. In this div I have 0-n other divs which can have varying widths.
I want my div to grow with its content, so I can simply scroll horizontal. However, my div just grows in height, and its content just stacks vertically. display: inline-block doesnt work on the content.
How can I solve this Problem?
P.S: It works if I set a fixed width to my div, of course this is too wide or too small most of the time.
Thanks!
Do you mean this?
If you don't want to define a width, you can use jQuery for that. How? Like this
var width = $('.child').width();;
$('.inner .child').each(function() { width += $(this).width(); });
$('.inner').css('width', width)
.child{
width:200px;
height:100px;
background:yellow;
border:1px solid #000;
display:inline-block;
}
.parent{
overflow-x:auto;
width:100%;
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="parent">
<div class="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
You can use a mixture of inline-block and white-space:nowrap:
.parent {
white-space:nowrap; /* make children all on one line */
width:100%;
overflow:auto;
}
.child {
display: inline-block; /* make inline block so obeys parent's white space */
white-space: normal; /* reset white space for children */
}
<div class="parent">
<div class="child">lots of text and stuff</div>
<div class="child">lots of text and stuff</div>
<div class="child">lots of text and stuff</div>
<div class="child">lots of text and stuff</div>
<div class="child">lots of text and stuff</div>
<div class="child">lots of text and stuff</div>
<div class="child">lots of text and stuff</div>
</div>
I found a very interesting image grid background on Codepen, that I'd like to use.
Only thing is i'm experiencing issues with getting a DIV on top of it.
https://codepen.io/pirolab/pen/qmeNqY
I've tried things such as top, z-index, but for some reason I'm struggling to get anything to be on top of the images.
Example of something I've tried
<section class="o-hero">
<div class="o-cards__main">
<div style="z-index:999;top:5;background:blue">Hello<div>
<div class="o-cards__container" id="container">
</div>
</div>
</section>
I'd really appreciate it if someone could help.
https://codepen.io/andrasadam93/pen/KyNvoe forked from yours if I understood your query correctly. The key parts are these (although I added some extra for visibility):
<section class="o-hero">
<div class="overlay">
<p>This is overlay</p>
</div>
<div class="o-cards__main">
<div class="o-cards__container" id="container"></div>
</div>
</section>
.overlay{
position:absolute;
z-index:999;
width: 100%;
height: 100%;
font-size: 24px;
font-weight:700;
color:#ff0000;
display:flex;
align-items:center;
justify-content:center;
}
I would like to build a slidepanel with js. For that I would like a div that resizes when slider opens.
Trying to do as following:
html
<div class="wrapper">
<div class="left">original content</div>
<div class="right">sliding from right side</div>
</div>
css
.wrapper {width:100%;height:100%;position:relative;}
.left {width:auto;height:100%;display:inline-block;}
.right {width:50%;height:100%;}
This is the basic setup. I would like to have left take the full width. But when I click a button I want right to Slide in to 50%. Before adding js, I am trying to position the two divs, but it does not work. I tried with table cell, flex, ... I m just not able to get it right. Someone a good tip?
$("#expand").on("click", function(){
$(".wrapper").toggleClass("expand");
});
.panel {
height:100vh;
transition: width .5s;
}
.left {
float:left;
width:100%;
Background:red;
Text-align:right;
}
.right {
float:right;
width:0%;
background:#ddd;
overflow:hidden;
}
.pos {right:5px;}
.wrapper.expand .left {width:50%;}
.wrapper.expand .right {width:50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="panel left">
original content
<button class="pos" id="expand">Click</button>
</div>
<div class="panel right">sliding from right side</div>
</div>
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
I can't seem to center my image slider, seems like an easy fix but I can't get it to center dead in the middle of my page (centered left & right, centered top and bottom) Any suggestions?
The image slider is #logo-and-slider in the CSS
Heres the jsfiddle: http://jsfiddle.net/gZDVL/13/ (thanks to #MaggiQall)
And here is a live link to it: http://jtcraddock.ie/boards/
I don't understand.
Is this your desired result?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>
I closed your img-tags. with />
http://jsfiddle.net/gZDVL/2/
I am not very sure about whether you want to include the logo in the content to be centered. I have shown the idea below. I have added some borders to clearly display how the elements are laid out. If you don't want to include logo remove it from the HTML structure. Basically what I have done is placed the content in a table-cell element with the content center aligned horizontally with middle vertical alignment. That places the content at "dead center" as you wanted :-) See the fiddle at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}