logo
down
shadow

Make a div containing CSS columns have unlimited width


Make a div containing CSS columns have unlimited width

By : Algimantas Frankonis
Date : November 17 2020, 04:28 AM
it helps some times Imagine a very common
layout, where the header and footer are fixed heights and the article gets as tall as needed (the page scrolls vertically to accommodate). That's like most web pages. , Here's a solution that works on webkit browsers, Firefox, and IE:
code :
// JS to work around the CSS column bug where the width
// is not properly calculated by the browser. We have a
// float:right marker at the end of the article. Set the
// width of the article to be where the marker is.
function resize()
{
    var article = document.querySelector("article"),
        marker = document.querySelector("endmarker");

    article.style.width = (marker.offsetLeft) + "px";
}

window.addEventListener("resize", resize);
resize();
* { padding: 0; margin: 0; }

holder {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: #fed;
    white-space: nowrap;
}

header,
article,
footer {
    position: relative;
	display: inline-block;
	height: 100%;
	vertical-align: top;
    white-space: normal;
}

header {
	background: green;
	width: 400px;
}

endmarker {
    position: relative;
    display: block;
    float: right;
    width: 10px;
    height: 10px;
    background: red;
}

article {
	background: #CCC;

	-webkit-columns: 235px auto;
    -moz-columns: 235px auto;
	columns: 235px auto;
    
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
    
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
}

article p {
	padding: .2em 15px;
	text-indent: 1em;
	hyphens: auto;
}

footer {
	background: yellow;
	width: 450px;
}
<holder>
<header>
    	<h1>Article Title (width 400)</h1>
</header>
<article>
    <p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>
    <p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>
    <p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>
    <p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>
    <p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoquenatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p>
<p>END OF ARTICLE</p>
<endmarker></endmarker>
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
</holder>


Share : facebook icon twitter icon
2-column layout with fixed content width, unlimited background width

2-column layout with fixed content width, unlimited background width


By : user2712243
Date : March 29 2020, 07:55 AM
This might help you If you want to use an image as you bg, then the image should span a minimum of 960px, the first 640px being one colour and the right 320px should be the other colour.
If you want the bg to span the entire site, then you have to create a background large enough to span the first 1024px with the above column dimensions I mentioned. Add this to your CSS:
code :
.wrapper {
    background:url("my image here") 0 0 repeat-y;
}
col1 { background-color:#fff; }
col2 { background-color:#ccc; }
<div class="wrapper">
    <div class="content">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>
// This will create a wrapper across the entire page.
.wrapper {
    margin:0 auto;
    width:100%;
}

// This is your centered column
.content {
    float:left;
    width:960px;
}

// This is your first column
.col1 {
    background: **your background goes here
    float:left;
    width:640px;
}

// This is your second column
.col2 {
    background: **your background goes here
    float:left;
    width:320px;
}
Clearing a CSS styled div width back to unlimited width

Clearing a CSS styled div width back to unlimited width


By : Rajvi Damur
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I have a series of auto generated divs that hold label and data info.
code :
div.uri {
    width: auto;
}
How do I make a table's columns fill the width not occupied by fixed-width columns?

How do I make a table's columns fill the width not occupied by fixed-width columns?


By : user2793972
Date : March 29 2020, 07:55 AM
I wish this helpful for you I have a 5-column table whose first and last columns have fixed (and different) widths. How do I force the 3 center columns to be equally distributed across the remaining width of the table? , How about trying the following?
code :
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style type="text/css">
      table{width: 100%; font-size: 0; line-height: 12px; table-layout: fixed;}
      td {border: 1px solid black; }
      #first{ min-width: 10px; width: 10px; }
      #second{ min-width: 20px; width: 20px; }
    </style>
  </head>

  <body>
    <table>
      <td id="first">&nbsp;</td>
      <td id="second">&nbsp;</td>
      <td id="third">&nbsp;</td>
      <td id="fourth">&nbsp;</td>
      <td id="fifth">&nbsp;</td>
    </table>
  </body>

</html>
How to make columns the same width and fill the entire space in width and height?

How to make columns the same width and fill the entire space in width and height?


By : user3502702
Date : March 29 2020, 07:55 AM
Hope that helps I've successfully solved the problem using CSS grid as it was suggested by Aravind Anil in the comments. Here is the solution:
code :
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background: #CCCCCC;
            margin: 10px;
        }

        .item-header {
            grid-area: header;
            justify-self: center;
            padding: 1rem;
           
        }

        .item-sidebar {
            grid-area: sidebar;
            padding: 1rem;
        }

        .item-main-1 {
            grid-area: main-block-1;
            background: white;
            padding: 1rem;
            border-radius: 5px;
        }

        .item-main-2 {
            grid-area: main-block-2;
            background: white;
            padding: 1rem;
            border-radius: 5px;
        }

        .container {
            display: grid;
            grid-template-columns: auto 1fr 1fr;
            grid-template-rows: 60px 1fr;
            grid-template-areas:
                "header header header"
                "sidebar main-block-1 main-block-2";
            grid-column-gap: 15px;
            grid-row-gap: 15px;
            width:100%;
            height: 100%;
        }
        
    </style>
</head>

<body>

    <div class="container">
        <div class="item-header">
            Header
        </div>
        <div class="item-sidebar">
            buttons
        </div>
        <div class="item-main-1">
            first
        </div>
        <div class="item-main-2">
            second
        </div>
    </div>

</body>

</html>
Trying to make the label of UITableViewCell limited in width but unlimited in height

Trying to make the label of UITableViewCell limited in width but unlimited in height


By : defrianda rizky
Date : March 29 2020, 07:55 AM
wish of those help You need to subclass the UITableViewCell and set the size of the label in layoutSubviews.
Although when you are creating the cell the label is being sized correctly, every time the cell is drawn on the screen your sizes are 'overwritten' by the UITableViewCell methods and so you don't see any change.
Related Posts Related Posts :
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • Avoid outline of button when clicked
  • How to add a repeating png image in the background of a webpage using CSS?
  • Heading text displaying at the center instead of displaying in the statring line in asp.net application
  • Div fixation with his mother
  • Sentence is not taking /n
  • Wordpress mobile devices logo resize
  • Why a div with higher z-index is not visible (covered)?
  • HTML5 How to align a table to center inside a form?
  • Why is my clip-path not working when it's source is an svg?
  • Flex-box sticky footer with inner flex-box container with y axis scrolling
  • css3 jagged edge with transparent bg
  • Boostrap glyphicon is outside of text field
  • How to achieve a left and right background split leaving middle div visible?
  • height:auto not working properly, div doesn't expand with content
  • Indicate that a LESS file should not be compiled on save
  • CSS hover transition / transform background color scale
  • CSS Aligning Dynamic Div
  • Background color/width running to 100% on css element
  • A CSS animation of a SVG Images 'fill' property not working in Safari
  • Background gradient in border?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org