I am trying to make responsive one of my sites... :)
In standard view (pc), I have a div container called "article" containing more divs on 2 cols, all of these have width: 350px.
Resizing the screen, I want the divs into "article" are centered into it in a single col.
I have tried a lot of ways, including margin: 0 auto, display: inline-block, display: table, but does not works, and divs are always flotted to left of "article". :(
Using this method in media query:
left: 50%
margin-left: 175px;
It center the div when "article" has width: 707px (708 is just I need for divs on two cols including a few padding),
but reducing width under 707px value, the centering is losed because margin-left has a fixed value!
you only need to margin: 0 auto; your div, like so:
.container {background-color:red;}
.content {background-color:aqua;width: 350px;margin:10px auto;}
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend eu leo quis euismod. Phasellus blandit suscipit ipsum non pretium. In facilisis scelerisque sodales. Integer posuere nunc eget orci tincidunt, et dapibus dui porta. Duis pellentesque commodo mi, non congue erat imperdiet ac. Morbi facilisis accumsan dapibus. Quisque metus risus, ullamcorper ut faucibus ac, elementum in arcu. Aliquam vulputate sapien sed ullamcorper dignissim. Cras aliquet nisl nibh, a feugiat tortor pellentesque ac. Donec id mollis ante, sit amet ultricies velit.
</div>
</div>
I would start by using percents on your sub columns. Fixed widths will cause unwanted problems.
Then on your mobile layout, have your sub column go full width and remove the float. That will have the columns stack on top of each other.
.article .subColumn {
width:48%;
float:left;
}
#media screen only and (max-width:480px) {
.article subColumn {
float:none;
width:100%;
padding:0 25px;
}
}
Related
I have this situation in html:
<div class="outer">
<div class="inner"></div>
</div>
.outer{
height: 300px;
overflow-y: scroll;
}
.inner{
height: fit-content;
overflow-x: scroll;
}
As a result, I have parent div and child div.
The child doesn't have vertical-scroll, and if it overflow - the parent get scroll bar - this is by design and I need it to be.
The child div has only horizontal scroll, but you must scroll the parent untill you see the end of the child to have access to the horizontal scroll:
This is not good, I want the user to always see the horizontal-scroll, not only when scrolling to the end vertically.
I know this behavior is exist by default when the vertical-scroll is also on the inner div, but in this case I must the vertical one to be outer.
You might want to add some additional clarity to your question, as there's a bit of guess work involved in determining your desired behaviour.. but if I've understood / guessed correctly, you want to turn off overflow-x so it cant be seen when you reach the bottom?
.outer{
height: 300px;
overflow-y: scroll;
}
.inner{
width: 200px;
height: fit-content;
overflow-x: hidden;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus et urna vitae vulputate. Vivamus volutpat metus et erat rutrum, sit amet tincidunt sapien malesuada. Proin semper euismod vestibulum. Pellentesque eget dapibus arcu. Curabitur sit amet tempus justo. Aliquam orci ligula, molestie sit amet pulvinar condimentum, commodo ut velit. Phasellus ullamcorper viverra ipsum. Donec nec laoreet turpis, sed congue ex. Vestibulum pharetra, massa eget tristique ultrices, nibh turpis faucibus lectus, quis semper mauris turpis vel est.
</div>
</div>
Ok, CSS gurus. Here's an easy one for you. I want to have a sidebar to the left of my main content area. I'd like the sidebar to take up 30% of the screen and the content to take up 70%. However, I'd like the sidebar area to take up 100% of the available height. I have
<div id="main">
<div id="side">
<%= render "layouts/sidebar" %>
</div>
<div id="contentArea"><%= yield %></div>
</div>
I thought setting the parent DIV to have "display:flex;" would make everything right ...
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
height: 100%;
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
but right now, the height of my sidebar is only equal to the content that's in it. How do I make it 100% of everything?
In your structure ‘main’ is parent div, that’s mean if you set ‘100% of everything’ to child div ‘side’ and this div not position absolute or fixed, ‘main’ get 100% too.
So, you can use relative lengths, like height: 100vh.
jsfiddle
But you can set to side div position fixed: it will help when you get scroll in contentArea, but side div all time will in left side with height 100vh.
jsfiddle
Tip: if you use flex, you can manipulate without float (e.g. justify-content
). Check it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is that you specified a height of 100% on #side. Ironically, this actually prevents the column from taking up the full vertical space, as it caps to at the height of the container. Because #main doesn't have a specified height, setting height: 100% on #side will constrain it to the height of the content (text) within.
Simply removing this causes the column to expand to take up the full vertical space:
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
/*height: 100%;*/
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
<div id="main">
<div id="side">
Side
</div>
<div id="contentArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut interdum quam. Integer nec tincidunt erat, in scelerisque turpis. Pellentesque interdum turpis eu ante gravida, a auctor lacus pulvinar. Maecenas elementum massa ac felis gravida lobortis
vitae eget nisi. Donec erat turpis, condimentum et ipsum in, tincidunt fringilla quam. Nam est dui, porttitor eget nisl sit amet, mollis varius dui. Suspendisse dui mauris, tincidunt vitae blandit ac, consectetur sed ex. Sed bibendum felis ex, id
euismod odio euismod ac. Praesent viverra arcu quis arcu condimentum, eget varius elit suscipit. Donec tempus, justo vel iaculis vehicula, risus magna varius ex, vitae mattis elit turpis ac magna. Fusce porta tempus erat vel ultricies. Suspendisse
vel erat blandit, semper dui sed, consequat urna. Pellentesque ultrices pellentesque feugiat. Donec sit amet turpis in orci accumsan blandit. In tincidunt erat sed tristique sagittis. Duis ultrices lacus quis vestibulum venenatis. Maecenas et risus
quam. Quisque semper purus id mauris gravida dictum. Cras tellus augue, sollicitudin ac maximus eget, porta elementum elit. Fusce vulputate consectetur dapibus. Praesent semper augue lacus, vel laoreet tellus ultricies fermentum. Phasellus vestibulum
fringilla purus ut malesuada.
</div>
</div>
Hope this helps! :)
Use: #side{height: 100vh;} (vh = viewport height), and remove display flex so you can have unequal height for each div.
Link to jsfiddle https://jsfiddle.net/gcoh62o6/5/
I'm working on a template for WordPress and need to render images to the left and to the right side of the main content div.
I have a wrapping div of 100% width, so the images don't overflow the screen, then I have given the images position: absolute (relative to the content div), and a negative value (the width of the image) on the right/left parameters.
This works fine, and renders the images nicely to the left and right of the main content. But the problem is, these images need to change every once in a while, and the width of the images varies, so the left and right offsets are not correct anymore.
How can I render the images outside of the div, without knowing the width? I've tried Left/Right:-100%;, but that doesnt work.
The images are purely decorational, and dont have to be (fully) visible when the screen is too small.
Thanks for any help!
If you can't specify the width and want to display the image as is (not scaling it), you can float the images to the right and left and use overflow:hidden on the content
.left {
float: left;
margin-right: 20px;}
.content {
overflow:hidden;}
.right {
float: right;
margin-left: 20px;}
However, you will need to have the following struture in your html for the layout to render correcty:
.wrap > img + img + .content
http://jsfiddle.net/h6u65hp8/1/
How about something like this? http://jsfiddle.net/usL5vcqg/
<div id="wrap">
<div id="leftImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
<div id="content">
text goes here
</div>
<div id="rightImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
</div>
* {
margin:0;
padding:0;
}
#wrap {
width:100%;
}
#leftImage {
width:20%;
float:left;
}
#rightImage {
width:20%;
float:left;
}
#content {
width:60%;
float:left;
}
img {
width:100%;
}
The images will scale depending on the size of the screen and they will always sit on either side of the content.
I actually came up with something myself. The content div has a static width, so what I did was switch the left and right parameters around, and set it to the width of the content div (plus some padding).
<div class='prevent-overflow'>
<div class='content'>
<img src='http://placehold.it/200X200' class='left-side-image' />
<img src='http://placehold.it/200X200' class='right-side-image' />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at libero nec ex vestibulum luctus ut eget odio. Nunc mollis, nulla eget cursus porttitor, neque sem rhoncus est, vel consequat leo lacus at nisl. Nulla ac sem eget lorem malesuada malesuada. Fusce in erat tempus, elementum sem id, dapibus sapien. Vivamus vestibulum enim nulla, id porttitor odio condimentum ac. Pellentesque lacinia mollis elit tristique luctus. Vivamus luctus ultricies ullamcorper. Vivamus eros orci, luctus et pellentesque commodo, egestas et velit. Duis ante velit, feugiat sed gravida ac, tempus sed odio. Praesent tincidunt risus id ex placerat rhoncus. Maecenas sit amet pharetra neque. Aenean dapibus a velit quis ultricies. Quisque aliquam erat nec est rutrum, nec ornare urna ultrices. Quisque accumsan purus non ex sagittis, in facilisis massa facilisis. Vivamus fermentum libero dictum neque laoreet, sit amet pretium dui luctus.
</div>
</div>
.prevent-overflow {
overflow:hidden;
width:100%;
}
.left-side-image{
position:absolute;
right:320px;
}
.right-side-image{
position:absolute;
left:320px;
}
.content {
width:300px;
margin:0 auto;
position:relative;
}
In my initial code, I had a negative Left/Right (depending on the size of the image) in the .left-side-image and .right-side-image classess.
http://jsfiddle.net/6wp1h52c/
I am having trouble making one div height move with the other/be equal. I need these to be equal as the left sidebar will have more content but I would still like the right div height to move with it as its a sidebar.
<div id="maincontainer">
<div class="contentcontainer">
<div class="postcontentcon">Nam eu auctor enim, id tincidunt dolor. Sed et lacinia sem. Donec pretium quam eget nunc vestibulum, vel sagittis nibh bibendum. Fusce eleifend sagittis ultrices. Nullam lobortis ultricies justo, nec tempus metus sollicitudin at. Proin sit amet turpis a orci ullamcorper pulvinar id vitae erat. Fusce sodales iaculis nulla ac faucibus. Vivamus blandit placerat nunc, nec dictum velit tincidunt in. Pellentesque elementum odio metus, eget fringilla nisi imperdiet quis. Etiam facilisis magna pellentesque lorem luctus condimentum. Nulla blandit ac ligula nec aliquam. Cras massa felis, condimentum condimentum ligula in, pharetra fermentum felis. Proin sed lorem interdum, lobortis lectus non, porta tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="postsidebarcon">Hello</div>
</div>
CSS
body { background-color:#606061; }
.contentcontainer {
margin:0 auto;
position:relative;
width: 1017px;
height:auto;
}
.postcontentcon {
margin:0 auto;
position:relative;
width: 694px;
background-color:#525253;
float:left;
}
.postsidebarcon {
margin:0 auto;
position:relative;
width: 323px;
height:inherit;
background-color:#484848;
float:left;
}
You have a few ways to do his :
display:flex and sizing your containers, default will draw child
side by side demo
display:table on parent + width and display:table-cell; on child + width : demo
clearing floats . float first element, set margin to second, add a pseudo with clear:both (or left/right) demo
faux-column technique, oldish but solid , fine here since parent container has a fixed width The idea is to draw the column onto background of parent : demo (here i used a gradient for the demo, but usally it is an image. You can use multiple background nowdays.
there is other tricky ways with: floatting & hudge heights , negative margin ,overflow. some will even use absolute positionning but you should stay away from using these.
i have this layout and i have these two divs, maincontent and extracontent. there supposed to float beside eachother. but when i have more than one extracontent div it slides down the main content for some reason. can you help me fix it?
i have provided a js fiddle, http://jsfiddle.net/XzRun/
HTML
<div id="container">
<div id="content">
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="maincontent">
<h1>Some header text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
</div>
</div>
</div>
CSS
#container {
width:1000px;
margin:0 auto;
padding:20px 0;
text-align:left;
}
#content {
margin-left:10px;
float:left; /* lines up the left #content and the right #sidebar div's beside eachother */
width:810px;
}
.maincontent {
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:506px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
.extracontent {
clear:left;
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:200px;
height:200px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
The problem is that divs are always floated horizontally, not vertically. What you want to do here is to float the .extracontents vertically, while keeping the horizontal relationship. To do this, wrap all the .extracontent divs in a '.allextras` div, with the following css:
.allextras { clear: left; float: left; width: 220px; }
Or however you want it styled to get the margins the way you want.
Im not particularly sure of what you want to achieve.
If you want to have two extra content panels beside each other, your either going to have to widen or shrink extra and main content.
To do this i recommend that you use some JQuery to determine the amount of .extracontent and then change the width according to that.
The best way would be to put .extracontent inside a container with static width and then do something like:
divide extracontent.width by (extracontent in parent).count.
You could also stretch #content to have a min-width instead of fixing the width to be 1000
As defined in your CSS, your #content has width 810px, your .maincontent has width 506px and your .extracontent has width 200px. If you add an extra .extracontent, you will have total 906px. So it goes beyond 810px and slides down.
Your #content that surrounds the one #maincontent and two #extracontents has a smaller width then all of them. 506 + 200 + 200 + all of the margins > 810px. Give it some more room and your divs won't drop to other levels.