Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to do fixed width right column column in bootstrap, but left column will be responsive.
I use bootstrap 2.3.2
(source: toile-libre.org)
Right column will not be resized at all screen size.
My basic solution below (see it in action here). I've padded out the CSS to demonstrate the blocks with colours, but all you really need to do is as follows:
Fixed element
Set it to float:right
Apply a fixed width to it
Fluid row element
Apply padding/margin-right equal to the width of the fixed element
Apply box-sizing:border-box, so that the 100% width against the .row-fluid element persists, but the margin/padding added doesn't push it out further. The markup below shows the minimum you'll need.
CSS
#fixed-width {
width:100px;
float:right;
}
#fluid.row-fluid {
margin-right:100px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
HTML
<div class="clearfix">
<div id="fixed-width">Content...</div>
<div id="fluid" class="row-fluid">
<div class="span4">a</div>
<div class="span4">b</div>
<div class="span4">c</div>
</div>
</div>
this kind of design it's not provided by bootstrap, but there are simple solutions.
Here is one, see the accepted answer to this previous SO question Bootstrap: Fixed gutter width in fluid layout?
and in particular, this css tricks
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
as shown in this fiddle http://jsfiddle.net/6vPqA/808/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
image
this is my first post here and I'm trying to figure out how I can do something like that
thanks in advance
I would use flexbox in CSS. once you lean this it will be a tool you use a lot for this type of thing. when you use flexbox there is a container element. i would use a div. see my example.
<!--HTML-->
<html>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</html>
the divs that are "class" of "box" are the no1 and no2 paragraphs. in CSS use:
/*CSS*/
#container {
display: flex;
flex-direction: row;
}
you'll just need to format the class of box which will format each of the elements in that class (4 in my example above)
use this cheat sheet and you'll be a pro at this in no time.
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
also, view the page source you want to copy, it will all be there for you to see.
good luck
In addition to what sao said, a more basic way would be using display's inline or inline-block properties:
.box {
display: inline-block;
}
<div>
<div class="box">X</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
It should do the trick, but I agree that using flex is a better and more advanced way to do so.
Also, I'd recommend searching a bit more for your question before asking it, I'm sure this question has been asked before.
Best of luck mate!
you've got many options depending on wether or not you intend for it to be only text, images .. and how adaptable you want it to be in the future.
here is a simple way that doesn't require advanced CSS:
.container { /*attributes of "div" weating the "container" class*/
display: flex;
width: 500px; /*make it 500pixels wide*/
}
.box {
width: 50%; /*all "box" will have a width of 50% it's parent (container here)*/
padding: 10px; /*give some cushion on the sides*/
}
.box:first-child { /*select only the first "box", very powerful*/
border-right: 1px solid red; /*right border to delimit*/
}
<div class="container"> <!--wide container in which both boxes go in-->
<div class="box"><!--1st box-->
<p>Your first text goes here and it goes on and on and on and on and on and forever....</p><!--1st text-->
</div><!--close 1st box-->
<div class="box"><!--2nd blox-->
<p>Your second text goes here and it goes on and on and on and on and on and forever....</p><!--2nd text-->
</div><!--close 2nd box-->
</div><!--close wide container box-->
The possibilities from here are endless. Visit a trusted site on HTML/CSS/JS coding to get started. I'm personally keen on Mozilla
Your most useful tool will be the "inspector", on any modern browser today you have the possibility to change CSS code and play around, discover what works and what doesn't. It doesn't affect anyone but you, on the page you're visiting, for example :
I used Flex in the example, but it's only one of the many options. With CSS there are often more than 2 ways to produce 1 result. Always go for the one with less code and less specific (more open ended to future changes)
Now hope your curiosity is tickled, get out there, learn & code !
I'm trying to figure out how I can do something like that
You have multiple options. From approximate worst to approximate best:
HTML tables (https://www.w3schools.com/html/html_tables.asp)
CSS absolute positioning (https://css3-tutorial.net/positioning/absolute/)
CSS tables (https://colintoh.com/blog/display-table-anti-hero)
CSS floats (https://www.w3schools.com/css/css_float.asp)
CSS Columns (https://www.w3schools.com/css/css3_multiple_columns.asp)
CSS Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS Grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to fix the following issue on this website: http://santanna.beutifi-website.com/
Notice that there is a blank space to the right as if the page has a wider width or margin, although after checking these features, I could not figure out what the problem is. It does not happen on mobile devices though.
I played with developer tools for quite a while and no luck, I was wondering if any of you might be able to see whats wrong...
Cheers!
I started writing what #Matthew said but since you're using WordPress it's probably better to just overwrite the style. Try this:
.copyright{
margin-left: 0 !important;
}
.copyright p{
text-align:center !important;
}
Add that to custom styles of the theme if possible. Good luck!
The issue only shows when you make the screen size smaller. It is being caused by your css below:
#media only screen and (min-width: 840px) (index):175
.copyright {
margin-left: 25%; */
}
When I remove that it solved the problem.
If you want your text to be centered you can either remove the text-left class you have on that div and center it manually or you can add text-align: center !important to your copyright class after you remove the margin.
Edit:
Also you should not double up on the .container classes like you have below. Either use one or the other.
<div class="container-fluid bg-dark-gray footer-bottom">
<div class="container">
<div class="row margin-three">
<!-- copyright -->
<div class="col-md-12 col-sm-12 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one light-gray-text2">
<p align="left" style="font-size:11px;text-transform:uppercase;color:#939598;width: 100% !important;">Copyright © 2017. Built & managed by <span style="color:#56c7cc;">BEUTiFi.com</span> All rights reserved.</p>
</div>
<!-- end copyright -->
</div>
</div>
</div>
It's a problem with the css in the .
the .container class item is set to a pixel width;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am using bootstrap to help structure a webpage. Within a row, I have three divs side-by-side, with widths: 2 columns, 6 columns, and 4 columns in that order in a 12 column layout.
The middle div also has a minimum width set, so when the outermost div shrinks beyond a certain width, there is not enough room for the right most div (the 4 column one), so it wraps around and hangs out below the other divs.
I would like to prevent this div from wrapping around, forcing it to be cut off by the window when the screen shrinks too small. How would I accomplish this?
I can provide any further details/code/pictures if necessary.
Thanks!
Before wrapping
After wrapping
To prevent wrapping: add this to your row.
.row{
width:100%;
margin:0;
padding:0;
display:flex;
}
width:100%;margin:0;padding:0; are optional in this.
This may cause your content to stretch to full height, so don't put content in bootstrap columns(e.g. `col-md-6 and so on) directly. put a div in them and put the content inside that div.
like this :
<div class="col-xs-2">
<div class="contentDiv">
<!--Put your content here-->
</div>
</div>
Here's an example:
#firstDiv,#secondDiv,#thirdDiv{
height:100px;
background-color:red;
min-width:100px;
}
#firstDiv{
background-color:green;
}
#secondDiv{
background-color:blue;
min-width:500px;
}
.row{
width:100%;
margin:0;
padding:0;
display:flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2" id="firstDiv">
</div>
<div class="col-xs-6" id="secondDiv">
</div>
<div class="col-xs-4" id="thirdDiv">
</div>
</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have:
<div>
<div>xxx</div>
<div>yyy</div>
<div>
How can I make it so the "yyy" appears on top (as in overwrites) the "xxx" and both are visible?
Make the outer div position: relative; and the two inner divs position: absolute.
By default, the location of a position: absolute div is top left, so both will be at the top left of the parent div, one on top of the other.
Quick and easy way
<div style="position:relative">
<div>xxx</div>
<div style="position:absolute;top:9px">yyy</div>
<div>
http://jsfiddle.net/naAj9/
html:
<div>
<div >xxx</div>
<div class="z-in">yyy</div>
<div>
css:
.z-in
{
position: relative;
bottom: 20px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am working with Jekyll for the first time and need some help with the styling.
I'm trying to create a page that splits down the middle vertically, the left half is black with white font, the right half is white with black font.
HTML:
<div id="left">Left</div>
<div id="right">Right</div>
CSS:
#left{float:left;width:50%;height:100%;color:#FFF;background:#000}
#right{float:right;width:49%;height:100%;color:#000;background:#FFF}
See this example:
<div id="black"></div>
<div id="white"></div>
In your CSS,
#black{
float:left;
background-color:black;
width:50%
height:100%;
color:white;
}
#white{
float:right;
background-color:white;
width:50%
height:100%;
color:black;
}