logo
down
shadow

2 divs in line, right's width = content, left fluids


2 divs in line, right's width = content, left fluids

By : Ren-Dishen
Date : November 17 2020, 11:55 AM
should help you out Basically, you'll want to float the div with the fixed width. In your case, flip the order of the text elements and float:right the first text div and set a max-width to limit the size. See here.
code :


Share : facebook icon twitter icon
3 nested divs - Fixed Width parent, Left & Right Width based on content, empty Centre Width equaling the difference?

3 nested divs - Fixed Width parent, Left & Right Width based on content, empty Centre Width equaling the difference?


By : 신성수
Date : March 29 2020, 07:55 AM
With these it helps I really hate offering suggestions on using tables but, This would be the easiest way to do it with a table/div/css hybrid solution. Tested and works.
code :
<div style="position: relative; width: 300px; height: auto;">
<table style="width: 100%">
  <tr>
    <td style="float: left; width: auto">
        a
    </td>
    <td style="width: 100%; text-align: left;">
        <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div>
    </td>
    <td style="float:right">
        z
    </td>
  </tr>
</table>
</div>
<div style="position: relative; width: 300px; height: auto;">
<table style="width: 100%">
  <tr>
    <td style="float: left; width: auto">
        1
    </td>
    <td style="width: 100%; text-align: left;">
        <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div>
    </td>
    <td style="float:right">
        infinity
    </td>
  </tr>
</table>
</div>
How to design 2 divs on the same line, width fixed at left, responsive at right, and same height for the both

How to design 2 divs on the same line, width fixed at left, responsive at right, and same height for the both


By : Leisha Chinn
Date : March 29 2020, 07:55 AM
To fix the issue you can do You can use Flex model to achieve that...
Demo
code :
.wrap {
    display: flex;
}

.left {
    width: 50px;
    background-color: grey;
}

.right {
    flex: 1;
    background-color: red;
    vertical-align: top;
}
.wrap {
    display: table;
}

.left {
    width: 50px;
    background-color: grey;
    display: table-cell;
}
.right {
    display: table-cell;
    background-color: red;
    vertical-align: top;
}
CSS- Two left floated 50% width divs do not fit on one line- jsfiddle

CSS- Two left floated 50% width divs do not fit on one line- jsfiddle


By : Jit-keong
Date : March 29 2020, 07:55 AM
wish helps you I am trying to setup rows of 100% width, and columns of varying width, with 12 total columns per row. , The developer tools state:
code :
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12,      .span1-5, .span1-8 {
    min-height: 1px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
width:calc(50% - 20px)
box-sizing:border-box;
Two divs (left, right) in parent, right with fixed width, left fill free space, both in same line. (without position rel

Two divs (left, right) in parent, right with fixed width, left fill free space, both in same line. (without position rel


By : Josh Poirier
Date : March 29 2020, 07:55 AM
I wish did fix the issue. You could do it like this:
JSFiddle - DEMO
code :
.container {
    width: 500px;
    background-color: bisque;
    height: 50px;
    display: table;
}
.container .left {
    background-color: burlywood;
    height: 50px;
    display: table-cell;
    width: 100%;
}
.container .right {
    background-color: chartreuse;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: text-top;
}
How to align multiple divs left and right in the same line in a responsive container (% width)?

How to align multiple divs left and right in the same line in a responsive container (% width)?


By : Maha
Date : March 29 2020, 07:55 AM
seems to work fine After more research and tests, I finally come up with a solution, with a demo:
code :
.item1 {background-color: red;}
.item2 {background-color: yellow;}
.item3 {background-color: blue;}

#container {
    width: 95%;
    display: flex;
    justify-content: space-between;
}

/* affects container_left and container_right divs */
 #container > div {
    display: flex;
}
/* affects items */
 #container > div > div {
    width: 100px;
    min-width: 100px; /* to avoid shrinking in IE 11*/
    height: 50px;
}

#container, #container > div {
    /* reading from right to left (RTL)*/
    /* flex-direction: row-reverse; */
}
<div id="container">
    <div class="container_left">
        <div class="item1">item1</div>
    </div>
    <div class="container_right">
        <div class="item2">item2</div>
        <div class="item3">item3</div>
    </div>
</div>
Related Posts Related Posts :
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • Sublime Autocompletion for HTML using Emmet inside .sublime-autocompletion file
  • Align bottom wrapped text at the left of an image
  • I'm trying to get :after:hover to work
  • Header and Picture won't Display Correctly
  • SVG stacking, anchor elements, and HTTP fetching
  • Positioning two elements on opposite ends of a 100% with header
  • How to overlay an image inside an image with HTML, CSS
  • Selected date isn't kept in select box
  • How to change background colour of entire div on hover?
  • Two gradients with two distinct sections with just one div element
  • Indent even rows of hexagons in CSS
  • Unwanted filled letters in webpage
  • Mask password character size too small
  • Show div #2 while hovering relative div #1 with translition effect in one container
  • Stacking Tables for a responsive HTML email
  • Hyperlink button created via text/css
  • Checkboxes aligned in a row
  • HTML <title> tag appearing on page
  • I need some assistance with Div Tags
  • CSS Navigation Bar is not horizontal and has wrong colours
  • Background-image width & height 100%
  • Set div height to window height
  • Image/Link alignment issue with bottom navbar
  • CSS hover bubble does not seem out
  • Centering media object on page using Bootstrap
  • Fading out/color overlay on background image
  • Load video after clicking a button or link inside div and stack the trigger, poster image, and video
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org